<meta charset="UTF-8">
<div id="querydev">
    <input type="file" id="file1" style="display: none;" />
    <input type="file" id="file2" style="display: none;" />
    <input type="file" id="file3" style="display: none;" />
    <input type="file" id="file4" style="display: none;" />
    <input type="file" id="file5" style="display: none;" />
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryDev")}}</h3>
        <ul>
            <li>
                <!-- <i-input v-model.trim="queryString" icon="ios-close-circle-outline" @on-click="cleanValue"></i-input> -->
                <div style="position: relative;width: 240px;">
                    <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                        <i-input v-model.trim="queryString" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" @on-click="onClickIcon"></i-input>
                        <transition name="fade">
                            <div class="search-item-wrapper" v-show="isShowMatchDev">
                                <ul id="ztree" class="ztree"></ul>
                            </div>
                        </transition>
                    </div>
                </div>
            </li>
            <li style="width:100px;">
                <i-button type="primary" icon="ios-search" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="exportAllDevice" :loading="exportLoading">{{$t("device.exportAllDevice")}}</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="exportData">{{$t("device.exportCurrentDevice")}}</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(-1)" :type="queryType=='ot' ? 'info':'default'" icon="ios-close-circle">{{$t("device.expired")}}<span v-if="queryType=='ot'">({{total}})</span></i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(60)" :type="queryType=='60ot' ? 'info':'md-checkbox'" icon="ios-search">{{$t("device.daysOverdue60")}}<span v-if="queryType=='60ot'">({{total}})</span></i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(7)" :type="queryType=='7ot' ? 'info':'default'" icon="ios-checkmark-circle">{{$t("device.daysOverdue7")}}<span v-if="queryType=='7ot'">({{total}})</span></i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(0)" :type="queryType=='all' ? 'info':'default'" icon="ios-tablet-portrait">{{$t("user.allDev")}}<span v-if="queryType=='all'">({{total}})</span></i-button>
            </li>
            <!-- all 7ot 60ot ot  -->
        </ul>


        <i-table border ref="table" :columns="columns" :data="tableData" :height="taleHeight" :loading="loading"></i-table>

        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changeDevicePage"></Page>
        </div>

        <Modal v-model="chargeModal" width="700" :title="$t('bgMgr.renew')" :mask-closable="false">
            <div v-if="deviceChargeRecords.length > 0">
                <Row style="border-top:1px solid #E8EAEC;border-left:1px solid #E8EAEC;">
                    <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">序号</i-col>
                    <i-col span="4" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">设备序号</i-col>
                    <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">设备类型</i-col>
                    <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">续费年数</i-col>
                    <i-col span="4" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">充值日期</i-col>
                    <i-col span="4" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">充值前</i-col>
                    <i-col span="4" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">充值后</i-col>
                </Row>
                <Row style="border-left:1px solid #E8EAEC;" v-for="item in deviceChargeRecords" :key="item">
                    <i-col span="2" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.index}}</i-col>
                    <i-col span="4" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.deviceid}}</i-col>
                    <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.devicetypename}}</i-col>
                    <i-col span="3" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.chargeyears}}</i-col>
                    <i-col span="4" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.chargetimeStr}}</i-col>
                    <i-col span="4" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.preoverduetime}}</i-col>
                    <i-col span="4" style="height: 100%;line-height:24px;text-align:center;border-bottom:1px solid #E8EAEC;border-right:1px solid #E8EAEC;">{{item.postoverduetime}}</i-col>
                </Row>
            </div>
            <div v-if="deviceChargeRecords.length == 0" style="border:1px solid #E8EAEC; height: 48px;line-height:48px;text-align:center;">
                {{$t('reportForm.empty')}}
            </div>
            <div slot="footer">
                <i-button style="width:100%;" type="primary" @click="chargeModal=false">{{$t("monitor.confirm")}}</i-button>
            </div>
        </Modal>
        <Modal v-model="modal" width="900" :title="$t('device.editDev')" :mask-closable="false" transfer="false">


            <Tabs :animated="false" v-model="tabActive">
                <Tab-Pane :label="$t('device.baseInfo')" name="baseInfo">
                    <div style="width:700px;margin:10px auto">
                        <Row style="margin: 10px 0" v-if="userType < 4">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("reportForm.selectAccount")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <el-select v-model="createrToUser" :popper-append-to-body="popperAppendToBody" style="width: 100%;" size="mini" filterable>
                                    <el-option v-for="item in userlists" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.grouping")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model.sync="groupid">
                                    <i-option v-for="item in groupsList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.sim")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="simnum"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("bgMgr.expirenotifytime")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <date-picker type="date" v-model="expirenotifytime" :disabled="disabledOverdueTime"></date-picker>
                            </i-col>

                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("alarm.devName")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="devicename"></i-input>
                            </i-col>

                        </Row>

                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.devType")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <!-- devicetype -->
                                <el-select v-model="devicetype" :disabled="isfree!==2" style="width: 100%;" size="mini" filterable>
                                    <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("alarm.devNum")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="deviceid" :disabled="isfree==6"></i-input>
                            </i-col>

                        </Row>

                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.networkType")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model="teltype">
                                    <i-option value="1">{{$t("reportForm.maxSignal")}}32(2G)</i-option>
                                    <i-option value="2">{{$t("reportForm.maxSignal")}}64(2G)</i-option>
                                    <i-option value="3">{{$t("reportForm.maxSignal")}}32(3G)</i-option>
                                    <i-option value="4">{{$t("reportForm.maxSignal")}}32(4G)</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.forwardAddress")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="forwardurl" disabled></i-input>
                            </i-col>
                        </Row>


                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.isUse")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model="deviceenable">
                                    <i-option value="0">{{$t("user.ban")}}</i-option>
                                    <i-option value="1">{{$t("user.allow")}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.tutelageUser")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="monitor"></i-input>
                            </i-col>
                        </Row>


                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.subEeditor")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model="allowedit" :disabled="isAlloweditDisabled">
                                    <i-option value="0">{{$t("user.ban")}}</i-option>
                                    <i-option value="1">{{$t("user.allow")}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.allowLogin")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model="loginenable">
                                    <i-option value="0">{{$t("user.ban")}}</i-option>
                                    <i-option value="1">{{$t("user.allow")}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.timeZone")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model="timezone">
                                    <i-option value="99">{{$t("device.automatic")}}</i-option>
                                    <i-option value="-12">-12</i-option>
                                    <i-option value="-11">-11</i-option>
                                    <i-option value="-10">-10</i-option>
                                    <i-option value="-9">-9</i-option>
                                    <i-option value="-8">-8</i-option>
                                    <i-option value="-7">-7</i-option>
                                    <i-option value="-6">-6</i-option>
                                    <i-option value="-5">-5</i-option>
                                    <i-option value="-4">-4</i-option>
                                    <i-option value="-3">-3</i-option>
                                    <i-option value="-2">-2</i-option>
                                    <i-option value="-1">-1</i-option>
                                    <i-option value="0">0</i-option>
                                    <i-option value="1">+1</i-option>
                                    <i-option value="2">+2</i-option>
                                    <i-option value="3">+3</i-option>
                                    <i-option value="4">+4</i-option>
                                    <i-option value="5">+5</i-option>
                                    <i-option value="6">+6</i-option>
                                    <i-option value="7">+7</i-option>
                                    <i-option value="8">+8</i-option>
                                    <i-option value="9">+9</i-option>
                                    <i-option value="10">+10</i-option>
                                    <i-option value="11">+11</i-option>
                                    <i-option value="12">+12</i-option>
                                    <i-option value="13">+13</i-option>
                                    <i-option value="14">+14</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.calmileageway")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model="calmileageway" placement="top">
                                    <i-option value="0">{{$t("device.automatic")}}</i-option>
                                    <i-option value="1">{{$t("device.devCalc")}}</i-option>
                                    <i-option value="2">{{$t("device.platformCalc")}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("monitor.remarks")}} : &nbsp;</i-col>
                            <i-col span="20">
                                <i-input v-model.trim="remark" type="textarea" :rows="2"></i-input>
                            </i-col>
                        </Row>
                    </div>
                </Tab-Pane>
                <Tab-Pane :label="$t('device.vehicleInfo')" name="vehicleInfo">
                    <div style="width:700px;height:432.67px;margin:10px auto">
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.plateno")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="plateno"></i-input>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.cartagcolor")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model="cartagcolor">
                                    <i-option value="1">{{$t('device.blue')}}</i-option>
                                    <i-option value="2">{{$t('device.yellow')}}</i-option>
                                    <i-option value="3">{{$t('device.black')}}</i-option>
                                    <i-option value="4">{{$t('device.white')}}</i-option>
                                    <i-option value="5">{{$t('device.green')}}</i-option>
                                    <i-option value="9">{{$t('device.other')}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.carcolor")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model="carcolor">
                                    <i-option value="1">{{$t('device.blue')}}</i-option>
                                    <i-option value="2">{{$t('device.yellow')}}</i-option>
                                    <i-option value="3">{{$t('device.black')}}</i-option>
                                    <i-option value="4">{{$t('device.white')}}</i-option>
                                    <i-option value="5">{{$t('device.green')}}</i-option>
                                    <i-option value="9">{{$t('device.other')}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.icon")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type search-wrapper" style="position: relative;" v-click-outside.capture="clickOutside">
                                    <div class="ivu-input ivu-input-default" style="padding: 0px;line-height: 28px;" @click="clickIconWrapper">
                                        <img :src="'./images/carstate/'+icon+'_green_0.png'" style="width: 28px;height: 28px;">
                                    </div>
                                    <transition name="fade">
                                        <ul class="search-item-wrapper" v-show="isShowIcon" style="cursor: pointer;">
                                            <li @click="selectedIcon(0)" :class="{'ivu-select-item-focus':icon == '0'}">
                                                <div>
                                                    <img :src="'./images/carstate/0_green_0.png'" style="width: 28px;height: 28px;">
                                                </div>
                                            </li>
                                            <li @click="selectedIcon(1)" :class="{'ivu-select-item-focus':icon == '1'}">
                                                <div>
                                                    <img :src="'./images/carstate/1_green_0.png'" style="width: 28px;height: 28px;">
                                                </div>
                                            </li>
                                            <li @click="selectedIcon(2)" :class="{'ivu-select-item-focus':icon == '2'}">
                                                <div>
                                                    <img :src="'./images/carstate/2_green_0.png'" style="width: 28px;height: 28px;">
                                                </div>
                                            </li>
                                            <li @click="selectedIcon(3)" :class="{'ivu-select-item-focus':icon == '3'}">
                                                <div>
                                                    <img :src="'./images/carstate/3_green_0.png'" style="width: 28px;height: 28px;">
                                                </div>
                                            </li>
                                            <li @click="selectedIcon(4)" :class="{'ivu-select-item-focus':icon == '4'}">
                                                <div>
                                                    <img :src="'./images/carstate/4_green_0.png'" style="width: 28px;height: 28px;">
                                                </div>
                                            </li>
                                            <li @click="selectedIcon(5)" :class="{'ivu-select-item-focus':icon == '5'}">
                                                <div>
                                                    <img :src="'./images/carstate/5_green_0.png'" style="width: 28px;height: 28px;">
                                                </div>
                                            </li>
                                            <li @click="selectedIcon(6)" :class="{'ivu-select-item-focus':icon == '6'}">
                                                <div>
                                                    <img :src="'./images/carstate/6_green_0.png'" style="width: 28px;height: 28px;">
                                                </div>
                                            </li>
                                        </ul>
                                    </transition>
                                </div>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("reportForm.vinno")}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="vin"></i-input>
                            </i-col>
                        </Row>
                    </div>
                </Tab-Pane>
                <Tab-Pane :label="$t('device.ownerInfo')" name="ownerInfo">
                    <div style="width:700px;height:432.67px;margin:10px auto">
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('reportForm.name')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="ownerInfoData.ownername" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.contact1')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="ownerInfoData.phonenum1" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.contact2')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="ownerInfoData.phonenum2" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('reportForm.idNumber')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="ownerInfoData.idnum" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.gender')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-select v-model="ownerInfoData.gender">
                                    <i-option value="1">{{$t('device.man')}}</i-option>
                                    <i-option value="0">{{$t('device.girl')}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('reportForm.address')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="ownerInfoData.address" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('monitor.remarks')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="ownerInfoData.ownerremark" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                    </div>
                </Tab-Pane>
                <Tab-Pane :label="$t('device.driverInfo')" name="driverInfo">
                    <div style="width:700px;height:432.67px;margin:10px auto">
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"> {{$t('device.drivername')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="driverInfo.drivername"></i-input>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t('device.gender')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model.sync="driverInfo.driversex">
                                    <i-option value="1">{{$t('device.man')}}</i-option>
                                    <i-option value="2">{{$t('device.girl')}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.driverbrith')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <date-picker type="date" v-model="driverInfo.driverbrith" style="width: 100%;"></date-picker>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t('device.drivernationality')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="driverInfo.drivernationality"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t('reportForm.address')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="driverInfo.driveraddress"></i-input>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t('device.driverphone')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="driverInfo.driverphone"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.driveridnumber')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="driverInfo.driveridnumber"></i-input>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t('device.drivercertificatetype')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-select v-model.sync="driverInfo.drivercertificatetype">
                                    <i-option value="1">{{$t('device.certificatetype1')}}</i-option>
                                    <i-option value="2">{{$t('device.certificatetype2')}}</i-option>
                                    <i-option value="0">{{$t('device.other')}} </i-option>
                                </i-select>
                            </i-col>
                        </Row>

                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t('device.driverissuorganization')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="driverInfo.driverissuorganization"></i-input>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.driverrelatevehiclenum')}} :</i-col>
                            <i-col span="8">
                                <date-picker type="date" v-model="driverInfo.driverrelatevehiclenum" style="width: 100%;"></date-picker>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.driverinitialdate')}} :</i-col>
                            <i-col span="8">
                                <date-picker type="date" v-model="driverInfo.driverinitialdate" style="width: 100%;"></date-picker>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.drivereffectivedate')}} :</i-col>
                            <i-col span="8">
                                <date-picker type="date" v-model="driverInfo.drivereffectivedate" style="width: 100%;"></date-picker>
                            </i-col>
                        </Row>

                        <Row style="margin: 10px 0">
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.drivercertificatenum')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="driverInfo.drivercertificatenum"></i-input>
                            </i-col>
                            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t('device.drivertype')}} : &nbsp;</i-col>
                            <i-col span="8">
                                <i-input v-model.trim="driverInfo.drivertype"></i-input>
                            </i-col>
                        </Row>
                    </div>
                </Tab-Pane>
                <Tab-Pane :label="$t('device.insureInfo')" name="insureInfo">
                    <div style="width:700px;height:432.67px;margin:10px auto">
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.securityNumber')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="insureInfoData.securitynum" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('reportForm.vinno')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="insureInfoData.insurevin" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.insureCompany')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="insureInfoData.insurecompany" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.insurenum')}}: &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="insureInfoData.insurenum" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.insuranceDate')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <date-picker type="date" v-model.trim="insureInfoData.subinsuretime" style="width: 100%;"></date-picker>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.effectiveDate')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <date-picker type="date" v-model.trim="insureInfoData.effecttime" style="width: 100%;"></date-picker>
                            </i-col>
                        </Row>
                        <Row style="margin:10px 0;">
                            <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.insureRemarks')}} : &nbsp;</i-col>
                            <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                                <i-input v-model.trim="insureInfoData.insuremark" style="width: 100%;"></i-input>
                            </i-col>
                        </Row>
                    </div>
                </Tab-Pane>
            </Tabs>

            <div slot="footer">
                <Row>
                    <i-col span="6" :offset="7">
                        <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                    <i-col span="6" :offset="1">
                        <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                    </i-col>
                </Row>
            </div>
        </Modal>
        <Modal v-model="ioModal" width="650" :mask-closable="false">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t("device.ioConfig")}} - {{devicename}}</span>
            </p>
            <div>
                <Row style="height:24px;margin: 2px 0;">
                    <i-Col span="4" style="height: 100%;line-height:24px;text-align: right;">
                        {{$t("device.ioNumber")}}:
                    </i-Col>
                    <i-Col span="8" style="height: 100%;line-height:24px;padding-left: 3px;">
                        <Input-Number :max="16" :min="0" v-model="ioCount" style="width: 100%;" size="small"></Input-Number>
                    </i-Col>
                </Row>
                <template v-for="i in ioCount">
                    <Row style="height:24px;margin: 2px 0;" style="height:24px;margin: 10px 0;" v-show="ioCount >= i">
                        <i-Col span="4" style="height: 100%;line-height:24px;text-align: right;">
                            {{$t("device.io" + i + "Open")}}：
                        </i-Col>
                        <i-Col span="8" style="height: 100%;padding-left: 3px;">
                            <i-input v-model.trim="ioObject['io'+i+'k']" style="width: 100%;" size="small"></i-input>
                        </i-Col>
                        <i-Col span="2" style="height: 100%;line-height:24px;text-align: right;">
                            {{$t("device.io" + i + "Close")}}：
                        </i-Col>
                        <i-Col span="8" style="height: 100%;padding-left: 3px;">
                            <i-input v-model.trim="ioObject['io'+i+'g']" style="width: 100%;" size="small"></i-input>
                        </i-Col>
                    </Row>
                </template>
            </div>
            <div slot="footer" style="text-align: center;">
                <i-input v-model.trim="referenceResourcesDeviceid" style="width:160px;" :placeholder="$t('device.importDeviceidsTips')"></i-input>
                <i-button type="primary" style="width: 75px;" @click="referenceResources">{{$t("device.copy")}}</i-button>
                <i-button style="width: 75px;" type="primary" @click="setIoConfig">{{$t("header.setting")}}</i-button>
            </div>
        </Modal>

        <Modal v-model="oilModal" width="650" :mask-closable="false" class="device-oil-modal">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t("device.oilMarking")}} - {{devicename}}</span>
            </p>
            <div>
                <Tabs type="card" v-model="tabsActive">
                    <tab-pane :label="$t('device.oil1')" style="min-height: 210px;" name="oil1">
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t('device.oilName')}}:
                            </i-col>
                            <i-col span="5">
                                <i-input v-model="name1" style="width:100%"></i-input>
                            </i-col>

                            <i-col span="4" offset="1" style="line-height: 32px;text-align: center;">
                                {{$t('device.purpose')}}:
                            </i-col>
                            <i-col span="5">
                                <i-select v-model="useas1">
                                    <i-option value="0">{{$t('device.travel')}}</i-option>
                                    <i-option value="1">{{$t('device.storage')}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.threshold")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="10000" :min="1" v-model.trim.number="threshold1" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                L
                            </i-col>
                            <i-col span="14" style="line-height: 18px;">
                                <Alert type="warning" show-icon>
                                    {{$t("device.thresholdDesc")}}
                                </Alert>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.tankShape")}}:
                            </i-col>
                            <i-col span="6">
                                <i-select v-model="tankShape1" style="width:128.75px">
                                    <i-option value="0">{{$t("device.noTank")}}</i-option>
                                    <i-option value="1">{{$t("device.cuboid")}}</i-option>
                                    <i-option value="2">{{$t("device.verticalCylinder")}}</i-option>
                                    <i-option value="3">{{$t("device.transverseCylinder")}}</i-option>
                                    <i-option value="4">{{$t("device.irregular")}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="line-height: 32px;text-align: center;" v-show="isShowMaxAdValue1">
                                {{$t("device.maxAnalogQuantity")}}:
                            </i-col>
                            <i-col span="5" v-show="isShowMaxAdValue1">
                                <input-number :max="65535" :min="1" v-model.trim.number="maxAdValue1" style="width:100%"></input-number>
                            </i-col>
                        </Row>
                        <div v-if="tankShape1 == 1">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="length1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankWidth")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="3" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="3" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape1 == 2">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="3" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape1 == 3">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankWidth")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="3" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape1 == 4">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.scale")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="65535" :min="0" v-model.trim.number="tagging1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="4" offset="1" style="line-height: 32px;text-align: center;">
                                    {{$t("device.calibratedFluid")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="0" v-model.trim.number="taggingOil1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    L
                                </i-col>
                                <i-col span="2">
                                    <i-button type="primary" @click="addTaggingRowData1">{{$t("user.add")}}</i-button>
                                </i-col>
                            </Row>
                            <i-table border :columns="taggingColumns1" size="small" ref="taggingTab1" :data="taggingData1" height="200"></i-table>
                            <div style="margin: 10px 0 0 0;text-align: right;">
                                <i-button type="primary" @click="importTownerInfo1">{{$t("device.importData")}}</i-button>
                                <i-button type="info" @click="exportDevice1">{{$t("reportForm.exportData")}}</i-button>
                                <i-button type="info" @click="downloadTemplate">{{$t('insure.templateDownload')}}</i-button>
                            </div>
                        </div>
                        <Row :style="{marginTop:tankShape1 == 4?'10px':'0px'}">
                            <i-col offset="4" span="16" style="text-align: center;">
                                <Alert type="warning">
                                    {{$t("device.theBoxCapacity")}}{{capacity1}}L
                                </Alert>
                            </i-col>
                        </Row>
                    </tab-pane>
                    <tab-pane :label="$t('device.oil2')" style="min-height: 210px;" name="oil2">
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t('device.oilName')}}:
                            </i-col>
                            <i-col span="5">
                                <i-input v-model="name2" style="width:100%"></i-input>
                            </i-col>

                            <i-col span="4" offset="1" style="line-height: 32px;text-align: center;">
                                {{$t('device.purpose')}}:
                            </i-col>
                            <i-col span="5">
                                <i-select v-model="useas2">
                                    <i-option value="0">{{$t('device.travel')}}</i-option>
                                    <i-option value="1">{{$t('device.storage')}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.threshold")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="10000" :min="1" v-model.trim.number="threshold2" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                L
                            </i-col>
                            <i-col span="14" style="line-height: 18px;">
                                <Alert type="warning" show-icon>
                                    {{$t("device.thresholdDesc")}}
                                </Alert>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.tankShape")}}:
                            </i-col>
                            <i-col span="6">
                                <i-select v-model="tankShape2" style="width:128.75px">
                                    <i-option value="0">{{$t("device.noTank")}}</i-option>
                                    <i-option value="1">{{$t("device.cuboid")}}</i-option>
                                    <i-option value="2">{{$t("device.verticalCylinder")}}</i-option>
                                    <i-option value="3">{{$t("device.transverseCylinder")}}</i-option>
                                    <i-option value="4">{{$t("device.irregular")}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="line-height: 32px;text-align: center;" v-show="isShowMaxAdValue2">
                                {{$t("device.maxAnalogQuantity")}} :
                            </i-col>
                            <i-col span="5" v-show="isShowMaxAdValue2">
                                <input-number :max="65535" :min="1" v-model.trim.number="maxAdValue2" style="width:100%"></input-number>
                            </i-col>
                        </Row>
                        <div v-if="tankShape2 == 1">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="length2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankWidth")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape2 == 2">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape2 == 3">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape2 == 4">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.scale")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="65535" :min="0" v-model.trim.number="tagging2" style="width:100%"></input-number>
                                </i-col>
                                <i-col offset="1" span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.calibratedFluid")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="0" v-model.trim.number="taggingOil2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    L
                                </i-col>
                                <i-col span="2">
                                    <i-button type="primary" @click="addTaggingRowData2">{{$t("user.add")}}</i-button>
                                </i-col>
                            </Row>
                            <i-table border :columns="taggingColumns2" ref="taggingTab2" size="small" :data="taggingData2" height="200"></i-table>
                            <div style="margin: 10px 0 0 0;text-align: right;">
                                <i-button type="primary" style="width:80px;" @click="importTownerInfo2">{{$t("device.importData")}}</i-button>
                                <i-button type="info" style="width:80px;" @click="exportDevice2">{{$t("reportForm.exportData")}}</i-button>
                                <i-button type="info" @click="downloadTemplate">{{$t('insure.templateDownload')}}</i-button>
                            </div>
                        </div>
                        <Row :style="{marginTop:tankShape2 == 4?'10px':'0px'}">
                            <i-col offset="4" span="16" style="text-align: center;">
                                <Alert type="warning">
                                    {{$t("device.theBoxCapacity")}}{{capacity2}}L
                                </Alert>
                            </i-col>
                        </Row>
                    </tab-pane>
                    <tab-pane :label="$t('device.oil3')" style="min-height: 210px;" name="oil3">
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t('device.oilName')}}:
                            </i-col>
                            <i-col span="5">
                                <i-input v-model="name3" style="width:100%"></i-input>
                            </i-col>

                            <i-col span="4" offset="1" style="line-height: 32px;text-align: center;">
                                {{$t('device.purpose')}}:
                            </i-col>
                            <i-col span="5">
                                <i-select v-model="useas3">
                                    <i-option value="0">{{$t('device.travel')}}</i-option>
                                    <i-option value="1">{{$t('device.storage')}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.threshold")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="10000" :min="1" v-model.trim.number="threshold3" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                L
                            </i-col>
                            <i-col span="14" style="line-height: 18px;">
                                <Alert type="warning" show-icon>
                                    {{$t("device.thresholdDesc")}}
                                </Alert>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.tankShape")}}:
                            </i-col>
                            <i-col span="6">
                                <i-select v-model="tankShape3" style="width:128.75px">
                                    <i-option value="0">{{$t("device.noTank")}}</i-option>
                                    <i-option value="1">{{$t("device.cuboid")}}</i-option>
                                    <i-option value="2">{{$t("device.verticalCylinder")}}</i-option>
                                    <i-option value="3">{{$t("device.transverseCylinder")}}</i-option>
                                    <i-option value="4">{{$t("device.irregular")}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="line-height: 32px;text-align: center;" v-show="isShowMaxAdValue3">
                                {{$t("device.maxAnalogQuantity")}} :
                            </i-col>
                            <i-col span="5" v-show="isShowMaxAdValue3">
                                <input-number :max="65535" :min="1" v-model.trim.number="maxAdValue3" style="width:100%"></input-number>
                            </i-col>
                        </Row>
                        <div v-if="tankShape3 == 1">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="length3" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankWidth")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width3" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height3" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape3 == 3">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height3" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter3" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape3 == 3">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width3" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter3" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape3 == 4">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.scale")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="65535" :min="0" v-model.trim.number="tagging3" style="width:100%"></input-number>
                                </i-col>
                                <i-col offset="1" span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.calibratedFluid")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="0" v-model.trim.number="taggingOil3" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    L
                                </i-col>
                                <i-col span="2">
                                    <i-button type="primary" @click="addTaggingRowData3">{{$t("user.add")}}</i-button>
                                </i-col>
                            </Row>
                            <i-table border :columns="taggingColumns3" ref="taggingTab3" size="small" :data="taggingData3" height="200"></i-table>
                            <div style="margin: 10px 0 0 0;text-align: right;">
                                <i-button type="primary" style="width:80px;" @click="importTownerInfo3">{{$t("device.importData")}}</i-button>
                                <i-button type="info" style="width:80px;" @click="exportDevice3">{{$t("reportForm.exportData")}}</i-button>
                                <i-button type="info" @click="downloadTemplate">{{$t('insure.templateDownload')}}</i-button>
                            </div>
                        </div>
                        <Row :style="{marginTop:tankShape3 == 4?'10px':'0px'}">
                            <i-col offset="4" span="16" style="text-align: center;">
                                <Alert type="warning">
                                    {{$t("device.theBoxCapacity")}}{{capacity3}}L
                                </Alert>
                            </i-col>
                        </Row>
                    </tab-pane>
                    <tab-pane :label="$t('device.oil4')" style="min-height: 210px;" name="oil4">
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t('device.oilName')}}:
                            </i-col>
                            <i-col span="5">
                                <i-input v-model="name4" style="width:100%"></i-input>
                            </i-col>

                            <i-col span="4" offset="1" style="line-height: 32px;text-align: center;">
                                {{$t('device.purpose')}}:
                            </i-col>
                            <i-col span="5">
                                <i-select v-model="useas4">
                                    <i-option value="0">{{$t('device.travel')}}</i-option>
                                    <i-option value="1">{{$t('device.storage')}}</i-option>
                                </i-select>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.threshold")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="10000" :min="1" v-model.trim.number="threshold4" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                L
                            </i-col>
                            <i-col span="14" style="line-height: 18px;">
                                <Alert type="warning" show-icon>
                                    {{$t("device.thresholdDesc")}}
                                </Alert>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.tankShape")}}:
                            </i-col>
                            <i-col span="6">
                                <i-select v-model="tankShape4" style="width:128.75px">
                                    <i-option value="0">{{$t("device.noTank")}}</i-option>
                                    <i-option value="1">{{$t("device.cuboid")}}</i-option>
                                    <i-option value="2">{{$t("device.verticalCylinder")}}</i-option>
                                    <i-option value="3">{{$t("device.transverseCylinder")}}</i-option>
                                    <i-option value="4">{{$t("device.irregular")}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="line-height: 32px;text-align: center;" v-show="isShowMaxAdValue4">
                                {{$t("device.maxAnalogQuantity")}} :
                            </i-col>
                            <i-col span="5" v-show="isShowMaxAdValue4">
                                <input-number :max="65535" :min="1" v-model.trim.number="maxAdValue4" style="width:100%"></input-number>
                            </i-col>
                        </Row>
                        <div v-if="tankShape4 == 1">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="length4" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankWidth")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width4" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height4" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape4 == 3">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height4" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter4" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape4 == 3">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width4" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter4" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape4 == 4">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.scale")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="65535" :min="0" v-model.trim.number="tagging4" style="width:100%"></input-number>
                                </i-col>
                                <i-col offset="1" span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.calibratedFluid")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="0" v-model.trim.number="taggingOil4" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    L
                                </i-col>
                                <i-col span="2">
                                    <i-button type="primary" @click="addTaggingRowData4">{{$t("user.add")}}</i-button>
                                </i-col>
                            </Row>
                            <i-table border :columns="taggingColumns4" ref="taggingTab4" size="small" :data="taggingData4" height="200"></i-table>
                            <div style="margin: 10px 0 0 0;text-align: right;">
                                <i-button type="primary" style="width:80px;" @click="importTownerInfo4">{{$t("device.importData")}}</i-button>
                                <i-button type="info" style="width:80px;" @click="exportDevice4">{{$t("reportForm.exportData")}}</i-button>
                                <i-button type="info" @click="downloadTemplate">{{$t('insure.templateDownload')}}</i-button>
                            </div>
                        </div>
                        <Row :style="{marginTop:tankShape4 == 4?'10px':'0px'}">
                            <i-col offset="4" span="16" style="text-align: center;">
                                <Alert type="warning">
                                    {{$t("device.theBoxCapacity")}}{{capacity4}}L
                                </Alert>
                            </i-col>
                        </Row>
                    </tab-pane>
                    <tab-pane :label="$t('device.addTempInfo')" style="min-height: 210px;" name="templateInfo">
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.templateName")}}:
                            </i-col>
                            <i-col span="12">
                                <i-input v-model.trim="templatename" style="width:100%"></i-input>
                            </i-col>
                            <i-col span="2" style="line-height: 32px;text-align: center;color: red;">
                                {{$t("device.required")}}
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.oilRodBrand")}}:
                            </i-col>
                            <i-col span="12">
                                <i-input v-model.trim="brand" style="width:100%"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.OilRodModel")}}:
                            </i-col>
                            <i-col span="12">
                                <i-input v-model.trim="model" style="width:100%"></i-input>
                            </i-col>
                        </Row>
                    </tab-pane>
                    <tab-pane :label="$t('device.templateList')" style="min-height: 210px;" name="template">
                        <i-table border :columns="templateColumns" :data="templateData" height="380"></i-table>
                    </tab-pane>
                </Tabs>
            </div>
            <div slot="footer" style="text-align: center;">
                <div v-if="tabsActive == 'templateInfo'">
                    <i-button style="width: 100px" type="primary" @click="saveTemplateInfo">{{$t("device.saveTemplate")}}</i-button>
                </div>
                <div v-else>
                    <Checkbox v-show="tabsActive !== 'template'" v-model="combineStatus">{{$t("device.mergeStatistical")}}</Checkbox>
                    <Checkbox v-show="tabsActive !== 'template'" v-model="combineStatusNotRun">{{$t("device.notRunOilMergeStatistical")}}</Checkbox>
                    <i-button v-show="tabsActive !== 'template'" style="width: 100px" type="primary" @click="saveOilDetectors">{{$t("bgMgr.submit")}}</i-button>
                    <i-button v-show="tabsActive !== 'template'" style="width: 100px" type="primary" @click="saveTemplateInfo">{{$t("device.addTemplate")}}</i-button>
                    <Checkbox v-show="tabsActive == 'template'" v-model="allTemp">{{$t("device.allTemplate")}}</Checkbox>
                    <i-input v-show="tabsActive == 'template'" v-model.trim="matchingTemp" style="width:100px" :placeholder="$t('device.filterTemplate')"></i-input>
                    <i-button v-show="tabsActive == 'template'" style="width: 100px" type="primary" @click="queryTemplateInfo">{{$t("device.queryTemplate")}}</i-button>
                </div>
            </div>
        </Modal>
        <Modal v-model="weightModal" width="650" :mask-closable="false">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t("device.weightMarking")}} - {{devicename}}</span>
            </p>
            <div>

                <Row style="margin: 10px 0;">
                    <i-col span="4" style="line-height: 32px;text-align: right;">
                        通讯协议 :
                    </i-col>
                    <i-col span="5">
                        <i-select v-model="protocolType" style="width:100%;">
                            <i-option value="1">河北重优</i-option>
                            <i-option value="2">上海通立</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" offset="1" style="line-height: 32px;text-align: right;">
                        传感器通道 :
                    </i-col>
                    <i-col span="5">
                        <i-select v-model="sensorType" style="width:100%;">
                            <i-option value="0">1</i-option>
                            <i-option value="1">2</i-option>
                            <i-option value="2">3</i-option>
                            <i-option value="3">4</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0;">
                    <i-col span="4" style="line-height: 32px;text-align: right;">
                        模拟量(AD) :
                    </i-col>
                    <i-col span="5">
                        <input-number :max="65535" :min="0" v-model.trim.number="advalue" style="width:100%"></input-number>
                    </i-col>
                    <i-col span="4" offset="1" style="line-height: 32px;text-align: right;">
                        载重值 :
                    </i-col>
                    <i-col span="5">
                        <input-number :min="0" v-model.trim.number="weight" style="width:100%"></input-number>
                    </i-col>
                    <i-col span="1" style="line-height: 32px;">
                        Kg
                    </i-col>
                    <i-col span="2">
                        <i-button type="primary" @click="addWeightData">{{$t("user.add")}}</i-button>
                    </i-col>
                </Row>
                <i-table border v-if="weightModal" :columns="weightColumns" ref="weightTable" :data="weightData" height="340"></i-table>
                <div style="margin: 10px 0 0 0;text-align: right;">
                    <i-button type="primary" @click="importWeightData">{{$t("device.importData")}}</i-button>
                    <i-button type="info" @click="exportWeightData">{{$t("reportForm.exportData")}}</i-button>
                    <i-button type="info" @click="downloadWeightTemplate">{{$t('insure.templateDownload')}}</i-button>
                </div>
            </div>
            <div slot="footer" style="text-align:center;">
                <i-button style="width: 100px" type="primary" @click="saveWeightDetectors" :loading="saveLoading">发送到设备</i-button>
                <i-button style="width: 100px" type="primary" @click="queryWeightMarkers" :loading="loading">在线查询</i-button>
            </div>
        </Modal>

        <Modal v-model="cleanModal" width="350" :mask-closable="false" @on-ok="onCleanLastAddress">
            <div style="text-align: center;">
                {{isZh?'确定清除最后位置吗?':'Are you sure to clear the last position?'}}
            </div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#querydev",
            i18n: utils.getI18n(),
            data: {
                cleanModal: false,
                tabActive: 'baseInfo',
                saveLoading: false,
                ioModal: false,
                ioCount: 0,
                ioObject: {
                    io1k: "",
                    io1g: "",
                    io2k: "",
                    io2g: "",
                    io3k: "",
                    io3g: "",
                    io4k: "",
                    io4g: "",
                    io5k: "",
                    io5g: "",
                    io6k: "",
                    io6g: "",
                    io7k: "",
                    io7g: "",
                    io8k: "",
                    io8g: "",
                    io9k: "",
                    io9g: "",
                    io10k: "",
                    io10g: "",
                    io11k: "",
                    io11g: "",
                    io12k: "",
                    io12g: "",
                    io13k: "",
                    io13g: "",
                    io14k: "",
                    io14g: "",
                    io15k: "",
                    io15g: "",
                    io16k: "",
                    io16g: "",
                },
                exportLoading: false,
                popperAppendToBody: false,
                carIconType: 1,
                referenceResourcesDeviceid: "",
                combineStatus: false,
                combineStatusNotRun: false,
                timezone: '99',
                calmileageway: '0',
                queryType: 'all', // all 7ot 60ot ot
                matchingTemp: '',
                templatename: '',
                brand: '',
                model: "",
                tabsActive: '',
                allTemp: false,
                isfree: 0,
                taleHeight: 300,
                isQuery: false,
                userType: localStorage.getItem('userType'),
                modal: false,
                queryString: "",
                loading: true,
                total: vRoot.$children[1].allDevCount,
                currentIndex: 1,
                teltype: '1',

                name1: isZh ? '油箱1' : 'Tank1',
                name2: isZh ? '油箱2' : 'Tank2',
                name3: isZh ? '油箱3' : 'Tank3',
                name4: isZh ? '油箱4' : 'Tank4',

                useas1: '0',
                useas2: '0',
                useas3: '0',
                useas4: '0',

                threshold1: 10,
                threshold2: 10,
                threshold3: 10,
                threshold4: 10,

                oilModal: false, //石油 
                weightModal: false, //石油 
                sensorType: '0', //载重
                protocolType: '1', //通讯协议
                tankShape1: '0', //油箱形状
                maxAdValue1: 65535,
                length1: 0,
                width1: 0,
                height1: 0,
                diameter1: 0, //圆柱体直径
                tagging1: 0,
                taggingOil1: 0,
                taggingData1: [],
                //
                tankShape2: '0', //油箱形状
                maxAdValue2: 65535,
                length2: 0,
                width2: 0,
                height2: 0,
                diameter2: 0, //圆柱体直径
                tagging2: 0,
                taggingOil2: 0,
                taggingData2: [],
                //
                tankShape3: '0', //油箱形状
                maxAdValue3: 65535,
                length3: 0,
                width3: 0,
                height3: 0,
                diameter3: 0, //圆柱体直径
                tagging3: 0,
                taggingOil3: 0,
                taggingData3: [],
                //
                tankShape4: '0', //油箱形状
                maxAdValue4: 65535,
                length4: 0,
                width4: 0,
                height4: 0,
                diameter4: 0, //圆柱体直径
                tagging4: 0,
                taggingOil4: 0,
                taggingData4: [],
                capacity1: 0,
                capacity2: 0,
                capacity3: 0,
                capacity4: 0,
                taggingColumns1: [{
                    type: 'index',
                    width: 65
                }, {
                    key: 'height',
                    title: vRoot.$t('device.scale'),
                }, {
                    key: 'volume',
                    title: vRoot.$t('reportForm.oil'),
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var index = params.index;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function() {
                                    vueInstanse.taggingData1.splice(index, 1);
                                }
                            }
                        }, vRoot.$t('monitor.delete'))
                    },
                }],
                taggingColumns2: [{
                    type: 'index',
                    width: 65
                }, {
                    key: 'height',
                    title: vRoot.$t('device.scale'),
                }, {
                    key: 'volume',
                    title: vRoot.$t('reportForm.oil'),
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var index = params.index;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function() {
                                    vueInstanse.taggingData2.splice(index, 1);
                                }
                            }
                        }, vRoot.$t('monitor.delete'))
                    },
                }],
                taggingColumns3: [{
                    type: 'index',
                    width: 65
                }, {
                    key: 'height',
                    title: vRoot.$t('device.scale'),
                }, {
                    key: 'volume',
                    title: vRoot.$t('reportForm.oil'),
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var index = params.index;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function() {
                                    vueInstanse.taggingData3.splice(index, 1);
                                }
                            }
                        }, vRoot.$t('monitor.delete'))
                    },
                }],
                taggingColumns4: [{
                    type: 'index',
                    width: 65
                }, {
                    key: 'height',
                    title: vRoot.$t('device.scale'),
                }, {
                    key: 'volume',
                    title: vRoot.$t('reportForm.oil'),
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var index = params.index;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function() {
                                    vueInstanse.taggingData4.splice(index, 1);
                                }
                            }
                        }, vRoot.$t('monitor.delete'))
                    },
                }],
                weightColumns: [{
                    type: 'index',
                    width: 65
                }, {
                    key: 'advalue',
                    title: '模拟量(AD)',
                }, {
                    key: 'weight',
                    title: '载重值(Kg)',
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var index = params.index;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function() {
                                    vueInstanse.weightData.splice(index, 1);
                                }
                            }
                        }, vRoot.$t('monitor.delete'))
                    },
                }],
                advalue: '',
                weight: '',
                weightData: [],
                columns: [{
                    title: vRoot.$t("alarm.devName"),
                    key: 'devicenamekey',
                }, {
                    title: vRoot.$t("alarm.devNum"),
                    key: 'deviceidkey'
                }, {
                    title: vRoot.$t("user.devType"),
                    key: 'devtype'
                }, {
                    title: 'ICCID',
                    key: 'simiccid'
                }, {
                    title: vRoot.$t("monitor.phoneNumber"),
                    key: 'simnumkey'
                }, {
                    width: 100,
                    title: vRoot.$t("bgMgr.bindpwd"),
                    key: 'bindpwd',
                }, {
                    title: vRoot.$t("bgMgr.addTime"),
                    key: 'createtimestr'
                }, {
                    title: vRoot.$t("monitor.expireTime"),
                    key: 'expirenotifytimestr'
                }, {
                    title: vRoot.$t("bgMgr.creater"),
                    key: 'creater',
                }, {
                    title: vRoot.$t("user.grouping"),
                    key: 'groupname'
                }, {
                    title: vRoot.$t('bgMgr.mileageRatio'),
                    width: 90,
                    render: function(h, params) {
                        return h('span', {}, params.row.distanceratio + '%')
                    }
                }, {
                    title: vRoot.$t("bgMgr.action"),
                    key: 'action',
                    width: 210,
                    render: function(h, params) {
                        return h('div', [
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: vRoot.$t("message.confirmDelHintCharge")
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    'on-ok': function() {
                                        vueInstanse.handleDelete(params.row.deviceid);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                    }
                                }, vRoot.$t("bgMgr.delete"))
                            ]),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function() {
                                        // vueInstanse.editDevice(params.row);
                                        vueInstanse.editDeviceIndex = params.index;
                                        editObject = params.row;
                                        vueInstanse.groupid = editObject.groupid;
                                        vueInstanse.createrToUser = editObject.creater;
                                        vueInstanse.setDeviceData();
                                        vueInstanse.queryCarMasterInfo(editObject.deviceid);
                                        vueInstanse.modal = true;
                                    }
                                }
                            }, vRoot.$t("bgMgr.edit")),
                            h('table-dropdown', {
                                props: {
                                    params: params
                                },
                            }, ''),
                        ])
                    }
                }],
                templateColumns: [{
                    title: vRoot.$t('device.templateName'),
                    key: 'templatename',
                }, {
                    title: vRoot.$t('device.brand'),
                    key: 'brand',
                    width: 80,
                }, {
                    title: vRoot.$t('device.model'),
                    key: 'model',
                    width: 80,
                }, {
                    title: vRoot.$t('device.oilCount'),
                    key: 'oilCount',
                    width: 80,
                }, {
                    title: vRoot.$t('device.tankParameters'),
                    render: function(h, params) {
                        var row = params.row;
                        return h(
                            'div', {}, [
                                h('p', {}, '1:' + row.oil1),
                                h('p', {}, '2:' + row.oil2),
                                h('p', {}, '3:' + row.oil3),
                                h('p', {}, '4:' + row.oil4),
                            ]
                        )
                    },
                }, {
                    width: 130,
                    title: vRoot.$t('alarm.action'),
                    render: function(h, params) {
                        var row = params.row;
                        return h(
                            'div', {}, [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: function() {
                                            var oildetectors = row.oildetectors;
                                            oildetectors.forEach(function(item, index) {
                                                if (index == 0) {
                                                    vueInstanse.tankShape1 = String(item.appearance);
                                                    vueInstanse.diameter1 = item.diameter;
                                                    vueInstanse.height1 = item.height;
                                                    vueInstanse.length1 = item.length;
                                                    vueInstanse.width1 = item.width;
                                                    vueInstanse.maxAdValue1 = item.maxAdValue;
                                                    vueInstanse.taggingData1 = item.markers ? item.markers : [];
                                                    vueInstanse.threshold1 = item.threshold;

                                                } else if (index == 1) {
                                                    vueInstanse.tankShape2 = String(item.appearance);
                                                    vueInstanse.diameter2 = item.diameter;
                                                    vueInstanse.height2 = item.height;
                                                    vueInstanse.length2 = item.length;
                                                    vueInstanse.width2 = item.width;
                                                    vueInstanse.maxAdValue2 = item.maxAdValue;
                                                    vueInstanse.taggingData2 = item.markers ? item.markers : [];
                                                    vueInstanse.threshold2 = item.threshold;
                                                } else if (index == 2) {
                                                    vueInstanse.tankShape3 = String(item.appearance);
                                                    vueInstanse.diameter3 = item.diameter;
                                                    vueInstanse.height3 = item.height;
                                                    vueInstanse.length3 = item.length;
                                                    vueInstanse.width3 = item.width;
                                                    vueInstanse.maxAdValue3 = item.maxAdValue;
                                                    vueInstanse.taggingData3 = item.markers ? item.markers : [];
                                                    vueInstanse.threshold3 = item.threshold;
                                                } else if (index == 3) {
                                                    vueInstanse.tankShape4 = String(item.appearance);
                                                    vueInstanse.diameter4 = item.diameter;
                                                    vueInstanse.height4 = item.height;
                                                    vueInstanse.length4 = item.length;
                                                    vueInstanse.width4 = item.width;
                                                    vueInstanse.maxAdValue4 = item.maxAdValue;
                                                    vueInstanse.taggingData4 = item.markers ? item.markers : [];
                                                    vueInstanse.threshold4 = item.threshold;
                                                }
                                            });
                                            vueInstanse.$Message.success(vRoot.$t('device.importSucc'));
                                        }
                                    }
                                }, vRoot.$t('device.import')),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '5px'
                                    },
                                    on: {
                                        click: function() {
                                            vueInstanse.deleteOilDetectorTemplate(row.oildetectortemplateid, params.index);
                                        }
                                    }
                                }, vRoot.$t('monitor.delete'))
                            ]
                        )
                    },
                }],
                chargeModal: false,
                templateData: [],
                editDeviceIndex: null,
                tableData: [],
                recordsList: [],
                groupsList: [],

                iconState: "ios-arrow-down",
                deviceid: "",
                devicename: "",
                devicetype: "",
                simnum: "",
                expirenotifytime: "",
                loginenable: "1",
                deviceenable: "0",
                deviceTypeList: [],
                groupid: '',
                forwardurl: "",
                allowedit: '0',
                createrToUser: "",
                remark: "",
                userlists: [],
                isShowMatchDev: false,
                monitor: "",
                plateno: "",
                cartagcolor: "9",
                carcolor: "9",
                vin: '',
                icon: "0",
                isShowIcon: false,

                // ownerInfoModal: false,
                ownerInfoData: { //编辑的设备信息
                    deviceid: '',
                    ownername: '',
                    phonenum1: '',
                    phonenum2: '',
                    idnum: '',
                    gender: '0',
                    ownerremark: '',
                    address: ''
                },

                insureInfoData: { //编辑的设备信息
                    deviceid: '',
                    securitynum: '', //防盗号
                    insurevin: '', //车架号
                    insurecompany: '', //保险公司
                    insurenum: '', //保单号
                    subinsuretime: new Date(), //投保日期
                    effecttime: new Date(), //生效日期
                    insuremark: '', //保险备注
                },
                deviceChargeRecords: [],
                driverInfo: {
                    drivername: "", //名字
                    driversex: "1", //性别 1：男 2：女' ,
                    driverbrith: new Date(), //生日 YYYY-MM-DD hh:mm:ss' ,
                    drivernationality: "", //'国籍' ,
                    driveraddress: "", //地址' ,
                    driverphone: "", //电话' ,
                    driveridnumber: "", //身份证' ,
                    drivercertificatenum: "", //从业资格证号码' ,
                    drivercertificatetype: "1", // '1:巡游出租汽车驾驶员\r\n2：网约出租汽车驾驶员\r\n0：其他' ,
                    drivertype: "", // '准驾车型' ,
                    driverinitialdate: new Date(), //'资格证初始领证日期' ,
                    drivereffectivedate: new Date(), //'资格证有效起始日期' ,
                    driverissuorganization: "", // '核发机关' ,
                    driverrelatevehiclenum: new Date(), //'核发日期' ,
                }
            },
            methods: {
                onCleanLastAddress() {
                    var me = this;
                    var url = myUrls.cleanPositionLast();
                    utils.sendAjax(url, {
                        deviceid: editObject.deviceid
                    }, function(resp) {
                        if (resp.status == 0) {
                            me.$Message.success(me.$t('message.clearSucc'));
                        } else {
                            me.$Message.error(me.$t('message.clearFail'));
                        }
                    });
                },
                clickOutside: function() {
                    this.isShowIcon = false;
                },
                clickIconWrapper: function() {
                    this.isShowIcon = true;
                },
                selectedIcon: function(icon) {
                    this.icon = String(icon);
                    this.isShowIcon = false;
                },
                queryChargeDeviceRecords: function(deviceid) {
                    var me = this;
                    var url = myUrls.queryChargeDeviceRecords();
                    var data = {
                        deviceid: deviceid
                    };
                    utils.sendAjax(url, data, function(respData) {
                        var deviceChargeRecords = [];
                        var records = respData.records;
                        if (records && records.length) {
                            records.sort(function(a, b) {
                                return b.chargetime - a.chargetime;
                            })
                            records.forEach(function(item, index) {
                                deviceChargeRecords.push({
                                    index: index + 1,
                                    deviceid: item.deviceid,
                                    chargetime: item.chargetime,
                                    chargetimeStr: DateFormat.longToDateStr(item.chargetime, timeDifference),
                                    devicetypename: item.devicetypename,
                                    peryearpoints: item.peryearpoints,
                                    chargeyears: item.chargeyears,
                                    chargepoints: item.chargepoints,
                                    preoverduetime: DateFormat.longToDateStr(item.preoverduetime, timeDifference),
                                    postoverduetime: DateFormat.longToDateStr(item.postoverduetime, timeDifference),
                                })
                            })
                        };
                        me.deviceChargeRecords = deviceChargeRecords;
                    })
                },
                downloadTemplate: function() {
                    var a = document.createElement('a');
                    a.href = myUrls.apihost + (isZh ? 'oiladtemplate.xlsx' : 'oiladtemplate_en.xlsx');
                    a.download = 'oiladtemplate.xlsx';
                    a.click();
                },
                downloadWeightTemplate: function() {
                    var a = document.createElement('a');
                    a.href = myUrls.apihost + (isZh ? 'weightemplate.xlsx' : 'weightemplate_en.xlsx');
                    a.download = 'weightemplate.xlsx';
                    a.click();
                },
                querySpeedSetting: function(params) {
                    this.speedSettingModal = true;

                },
                onClickCalibration: function(params) {
                    this.oilModal = true;
                    this.tabsActive = 'oil1';
                    editObject = params.row;
                    this.setDeviceData();
                    this.queryOilInfo(params.row.deviceid);
                },
                onClickWeight: function(params) {
                    editObject = params.row;
                    this.setDeviceData();
                    this.weightData = [];
                    this.advalue = '';
                    this.weight = '';
                    this.weightModal = true;
                },
                onClickIoSetting: function(params) {
                    editObject = params.row;
                    this.setDeviceData();
                    this.queryIoConfig(editObject.deviceid);
                },
                queryWeightMarkers: function() {
                    var me = this;
                    var url = myUrls.queryWeightMarkers();
                    var data = {
                        deviceid: editObject.deviceid,
                        weightindex: Number(this.sensorType),
                        protocoltype: Number(this.protocolType)
                    };
                    me.loading = true;
                    utils.sendAjax(url, data, function(resp) {
                        console.log('resp', resp);
                        me.loading = false;
                        var status = resp.status;
                        if (status == CMD_SEND_RESULT_UNCONFIRM) {
                            me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                        } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                            me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                            me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                        } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                            me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                        } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                            me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                        } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                            me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                        } else if (status === CMD_SEND_CONFIRMED) {
                            if (resp.markers.length) {
                                me.weightData = resp.markers;
                            } else {
                                me.weightData = [];
                            };
                        } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                            me.$Message.error(me.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                        } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                            me.$Message.error(me.$t('monitor.CMD_SEND_SYNC_TIMEOUT') + resp.cause);
                        }
                    }, function(e) {
                        me.loading = false;
                    });
                },
                queryCarMasterInfo: function(deviceid) {
                    utils.queryDeviceex(deviceid, function(resp) {
                        vueInstanse.ownerInfoData.deviceid = deviceid;
                        if (resp) {
                            vueInstanse.ownerInfoData.ownername = resp.ownername;
                            vueInstanse.ownerInfoData.phonenum1 = resp.phonenum1;
                            vueInstanse.ownerInfoData.phonenum2 = resp.phonenum2;
                            vueInstanse.ownerInfoData.idnum = resp.idnum;
                            vueInstanse.ownerInfoData.gender = String(resp.gender);
                            vueInstanse.ownerInfoData.ownerremark = resp.ownerremark;
                            vueInstanse.ownerInfoData.address = resp.address;

                            vueInstanse.driverInfo.drivername = resp.drivername; //名字  
                            vueInstanse.driverInfo.driversex = String(resp.driversex); //性别 1：男 2：女' ,
                            vueInstanse.driverInfo.driverbrith = new Date(resp.driverbrith ? resp.driverbrith : 0); //生日 YYYY-MM-DD hh:mm:ss' ,
                            vueInstanse.driverInfo.drivernationality = resp.drivernationality; //'国籍' ,
                            vueInstanse.driverInfo.driveraddress = resp.driveraddress; //地址' ,
                            vueInstanse.driverInfo.driverphone = resp.driverphone; //电话' ,
                            vueInstanse.driverInfo.driveridnumber = resp.driveridnumber; //身份证' ,
                            vueInstanse.driverInfo.drivercertificatenum = resp.drivercertificatenum; //从业资格证号码' ,
                            vueInstanse.driverInfo.drivercertificatetype = String(resp.drivercertificatetype); // '1:巡游出租汽车驾驶员\r\n2：网约出租汽车驾驶员\r\n0：其他' ,
                            vueInstanse.driverInfo.drivertype = resp.drivertype // '准驾车型' ,
                            vueInstanse.driverInfo.driverinitialdate = new Date(resp.driverinitialdate ? resp.driverinitialdate : 0); //'资格证初始领证日期' ,
                            vueInstanse.driverInfo.drivereffectivedate = new Date(resp.drivereffectivedate ? resp.drivereffectivedate : 0); //'资格证有效起始日期' ,
                            vueInstanse.driverInfo.drivertype = resp.drivertype; // '核发机关' ,
                            vueInstanse.driverInfo.driverrelatevehiclenum = new Date(resp.driverrelatevehiclenum ? resp.driverrelatevehiclenum : 0); //'核发日期' ,

                            vueInstanse.insureInfoData.securitynum = resp.securitynum;
                            vueInstanse.insureInfoData.insurevin = resp.insurevin;
                            vueInstanse.insureInfoData.insurecompany = resp.insurecompany;
                            vueInstanse.insureInfoData.insurenum = resp.insurenum;
                            vueInstanse.insureInfoData.subinsuretime = new Date(resp.subinsuretime ? resp.subinsuretime : 0);
                            vueInstanse.insureInfoData.effecttime = new Date(resp.effecttime ? resp.effecttime : 0);
                            vueInstanse.insureInfoData.insuremark = resp.insuremark;

                        } else {
                            vueInstanse.ownerInfoData.ownername = '';
                            vueInstanse.ownerInfoData.phonenum1 = '';
                            vueInstanse.ownerInfoData.phonenum2 = '';
                            vueInstanse.ownerInfoData.idnum = '';
                            vueInstanse.ownerInfoData.gender = '';
                            vueInstanse.ownerInfoData.ownerremark = '';
                            vueInstanse.ownerInfoData.address = '';


                            vueInstanse.driverInfo.drivername = ""; //名字  
                            vueInstanse.driverInfo.driversex = "1"; //性别 1：男 2：女' ,
                            vueInstanse.driverInfo.driverbrith = new Date(); //生日 YYYY-MM-DD hh:mm:ss' ,
                            vueInstanse.driverInfo.drivernationality = ""; //'国籍' ,
                            vueInstanse.driverInfo.driveraddress = ""; //地址' ,
                            vueInstanse.driverInfo.driverphone = ""; //电话' ,
                            vueInstanse.driverInfo.driveridnumber = ""; //身份证' ,
                            vueInstanse.driverInfo.drivercertificatenum = ""; //从业资格证号码' ,
                            vueInstanse.driverInfo.drivercertificatetype = "1"; // '1:巡游出租汽车驾驶员\r\n2：网约出租汽车驾驶员\r\n0：其他' ,
                            vueInstanse.driverInfo.drivertype = ""; // '准驾车型' ,
                            vueInstanse.driverInfo.driverinitialdate = new Date(); //'资格证初始领证日期' ,
                            vueInstanse.driverInfo.drivereffectivedate = new Date(); //'资格证有效起始日期' ,
                            vueInstanse.driverInfo.drivertype = ""; // '核发机关' ,
                            vueInstanse.driverInfo.driverrelatevehiclenum = new Date(); //'核发日期' ,


                            vueInstanse.insureInfoData.securitynum = '';
                            vueInstanse.insureInfoData.insurevin = '';
                            vueInstanse.insureInfoData.insurecompany = '';
                            vueInstanse.insureInfoData.insurenum = '';
                            vueInstanse.insureInfoData.subinsuretime = new Date();
                            vueInstanse.insureInfoData.effecttime = new Date();
                            vueInstanse.insureInfoData.insuremark = '';

                        }
                        // vueInstanse.ownerInfoModal = true;
                    });
                },
                referenceResources: function() {
                    if (this.referenceResourcesDeviceid == '') {
                        this.$Message.error(this.$t('device.inputDeviceId'));
                        return;
                    }
                    this.queryIoConfig(this.referenceResourcesDeviceid);
                },
                queryInsureInfo: function(params) {
                    utils.queryDeviceex(params.row.deviceid, function(resp) {
                        console.log('resp', resp)
                        vueInstanse.insureInfoData.deviceid = params.row.deviceid;
                        if (resp) {
                            vueInstanse.insureInfoData.securitynum = resp.securitynum;
                            vueInstanse.insureInfoData.insurevin = resp.insurevin;
                            vueInstanse.insureInfoData.insurecompany = resp.insurecompany;
                            vueInstanse.insureInfoData.insurenum = resp.insurenum;
                            vueInstanse.insureInfoData.subinsuretime = resp.subinsuretime;
                            vueInstanse.insureInfoData.effecttime = resp.effecttime;
                            vueInstanse.insureInfoData.insuremark = resp.insuremark;
                        } else {
                            vueInstanse.insureInfoData.securitynum = '';
                            vueInstanse.insureInfoData.insurevin = '';
                            vueInstanse.insureInfoData.insurecompany = '';
                            vueInstanse.insureInfoData.insurenum = '';
                            vueInstanse.insureInfoData.subinsuretime = '';
                            vueInstanse.insureInfoData.effecttime = '';
                            vueInstanse.insureInfoData.insuremark = '';
                        }

                    });
                },
                queryIoConfig: function(deviceid) {
                    var me = this;
                    var url = myUrls.queryIoConfig();
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(resp) {
                        if (resp.status == 0) {
                            var records = resp.records;
                            if (records) {
                                me.ioCount = records.length;
                                for (var i = 0; i < me.ioCount; i++) {
                                    var item = records[i];
                                    if (item) {
                                        me.ioObject['io' + (i + 1) + 'k'] = item.openstr;
                                        me.ioObject['io' + (i + 1) + 'g'] = item.closestr;
                                    } else {
                                        me.ioObject['io' + (i + 1) + 'k'] = '';
                                        me.ioObject['io' + (i + 1) + 'g'] = '';
                                    }
                                }
                            } else {
                                for (var i = 0; i < 16; i++) {
                                    me.ioObject['io' + (i + 1) + 'k'] = '';
                                    me.ioObject['io' + (i + 1) + 'g'] = '';
                                }
                                me.ioCount = 0;
                                me.$Message.error(vRoot.$t('device.dataEmptyTips'));
                            }

                        } else {
                            me.$Message.error(vRoot.$t('monitor.queryFail'));
                        }
                        me.ioModal = true;
                    });
                },
                setIoConfig: function() {
                    var url = myUrls.setIoConfig();
                    var records = [],
                        me = this;
                    for (var i = 1; i <= this.ioCount; i++) {
                        records.push({
                            index: i,
                            openstr: this.ioObject['io' + i + 'k'],
                            closestr: this.ioObject['io' + i + 'g'],
                        })
                    }
                    var data = {
                        deviceid: editObject.deviceid,
                        records: records
                    }

                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status === 0) {
                            me.ioModal = false;
                            me.$Message.success(vRoot.$t('monitor.setupSucc'));
                        } else {
                            me.$Message.error(vRoot.$t('monitor.setupFail'));
                        }
                    })

                },
                changeDevicePage: function(index) {
                    this.currentIndex = index;
                    this.getDeviceList(false, this.getQueryTypeNumber());
                },
                deleteOilDetectorTemplate: function(id, index) {
                    var me = this;
                    utils.sendAjax(myUrls.deleteOilDetectorTemplate(), {
                        oildetectortemplateid: id
                    }, function(resp) {
                        if (resp.status == 0) {
                            me.$Message.success(vRoot.$t('message.deleteSucc'));
                            me.templateData.splice(index, 1);
                        } else if (resp.status == 1) {
                            me.$Message.error(vRoot.$t('message.noAuthority'));
                        } else {
                            me.$Message.error(vRoot.$t('message.deleteFail'));
                        }
                    })
                },
                queryTemplateInfo: function() {
                    var me = this;
                    utils.sendAjax(myUrls.queryOilDetectorTemplate(), {
                        isall: this.allTemp
                    }, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success(vRoot.$t('monitor.querySucc'));
                            var records = resp.records;
                            if (me.matchingTemp === '') {
                                records.forEach(function(item) {
                                    var oildetectors = item.oildetectors;
                                    var oil1 = oildetectors[0];
                                    var oil2 = oildetectors[1];
                                    var oil3 = oildetectors[2];
                                    var oil4 = oildetectors[3];
                                    var oilCount = 0;
                                    item.oil1 = me.getTankShape(oil1.appearance);
                                    item.oil2 = me.getTankShape(oil2.appearance);
                                    item.oil3 = me.getTankShape(oil3 ? oil3.appearance : 0);
                                    item.oil4 = me.getTankShape(oil4 ? oil4.appearance : 0);
                                    oildetectors.forEach(function(oil) {
                                        if (oil.appearance != 0) {
                                            oilCount++;
                                        }
                                    })
                                    item.oilCount = oilCount;
                                });
                                me.templateData = records;
                            } else {
                                var filters = [];

                                records.forEach(function(item) {
                                    var oildetectors = item.oildetectors;
                                    var oil1 = oildetectors[0];
                                    var oil2 = oildetectors[1];
                                    var oil3 = oildetectors[2];
                                    var oil4 = oildetectors[3];
                                    var oilCount = 0;
                                    item.oil1 = me.getTankShape(oil1.appearance);
                                    item.oil2 = me.getTankShape(oil2.appearance);
                                    item.oil3 = me.getTankShape(oil3 ? oil3.appearance : 0);
                                    item.oil4 = me.getTankShape(oil4 ? oil4.appearance : 0);
                                    if (item.templatename.indexOf(me.matchingTemp) != -1 || item.brand.indexOf(me.matchingTemp) != -1 || item.model.indexOf(me.matchingTemp) != -1) {
                                        filters.push(item);
                                    }
                                    oildetectors.forEach(function(oil) {
                                        if (oil.appearance != 0) {
                                            oilCount++;
                                        }
                                    })
                                    item.oilCount = oilCount;

                                });
                                me.templateData = filters;

                            }
                        } else {
                            me.$Message.error(vRoot.$t('monitor.queryFail'));
                        }
                    })
                },
                getTankShape: function(type) {
                    var tankShape = '';
                    switch (type) {
                        case 0:
                            tankShape = vRoot.$t('device.noTank');
                            break;
                        case 1:
                            tankShape = vRoot.$t('device.cuboid');
                            break;
                        case 2:
                            tankShape = vRoot.$t('device.verticalCylinder');
                            break;
                        case 3:
                            tankShape = vRoot.$t('device.transverseCylinder');
                            break;
                        case 4:
                            tankShape = vRoot.$t('device.irregular');
                            break;
                    }
                    return tankShape
                },
                saveTemplateInfo: function() {
                    if (this.tabsActive == 'templateInfo') {
                        if (this.templatename.length === 0) {
                            this.$Message.error(vRoot.$t('device.requiredTempName'));
                            return;
                        }
                        var oilDetector1 = {
                            appearance: Number(this.tankShape1),
                            maxAdValue: this.maxAdValue1,
                            length: this.length1,
                            width: this.width1,
                            height: this.height1,
                            diameter: this.diameter1,
                            markers: this.taggingData1,
                            threshold: this.threshold1
                        };
                        var oilDetector2 = {
                            appearance: Number(this.tankShape2),
                            maxAdValue: this.maxAdValue2,
                            length: this.length2,
                            width: this.width2,
                            height: this.height2,
                            diameter: this.diameter2,
                            markers: this.taggingData2,
                            threshold: this.threshold2
                        };
                        var oilDetector3 = {
                            appearance: Number(this.tankShape3),
                            maxAdValue: this.maxAdValue3,
                            length: this.length3,
                            width: this.width3,
                            height: this.height3,
                            diameter: this.diameter3,
                            markers: this.taggingData3,
                            threshold: this.threshold3
                        };
                        var oilDetector4 = {
                            appearance: Number(this.tankShape4),
                            maxAdValue: this.maxAdValue4,
                            length: this.length4,
                            width: this.width4,
                            height: this.height4,
                            diameter: this.diameter4,
                            markers: this.taggingData4,
                            threshold: this.threshold4
                        };
                        var oildetectors = [oilDetector1, oilDetector2, oilDetector3, oilDetector4];
                        var me = this;
                        var data = {
                            templatename: this.templatename,
                            deviceid: editObject.deviceid,
                            oildetectors: oildetectors,
                            independent: me.combineStatus ? 0 : 1,
                        };
                        me.brand ? data.brand = me.brand : null;
                        me.model ? data.model = me.model : null;
                        utils.sendAjax(myUrls.saveOilDetectorTemplate(), data, function(resp) {
                            if (resp.status == 0) {
                                me.$Message.success(vRoot.$t('device.tempSaveSucc'));
                            } else {
                                me.$Message.error(vRoot.$t('device.tempSaveFail'));
                            }
                        });
                    } else {
                        this.tabsActive = 'templateInfo';
                    }
                },
                addWeightData: function() {
                    if (this.advalue && this.weight) {
                        this.weightData.push({
                            advalue: this.advalue,
                            weight: this.weight,
                        })
                    } else {
                        this.$Message.error('请添写有效值');
                    }
                },
                addTaggingRowData1: function() {
                    var isHas = false;
                    var taggingData = deepClone(this.taggingData1);
                    for (var i = 0; i < taggingData.length; i++) {
                        var item = taggingData[i];
                        if (item.height === this.tagging1) {
                            isHas = true;
                            break;
                        }
                    }
                    if (isHas) {
                        this.$Message.error(vRoot.$t('device.scaleAlreadyExists'));
                    } else {
                        taggingData.push({
                            height: this.tagging1,
                            volume: this.taggingOil1
                        });
                        taggingData.sort(function(a, b) {
                            return b.height - a.height;
                        });
                        this.taggingData1 = taggingData;
                    }

                },
                addTaggingRowData2: function() {
                    var isHas = false;
                    var taggingData = deepClone(this.taggingData2);
                    for (var i = 0; i < taggingData.length; i++) {
                        var item = taggingData[i];
                        if (item.height === this.tagging2) {
                            isHas = true;
                            break;
                        }
                    }
                    if (isHas) {
                        this.$Message.error(vRoot.$t('device.scaleAlreadyExists'));
                    } else {
                        taggingData.push({
                            height: this.tagging2,
                            volume: this.taggingOil2
                        });
                        taggingData.sort(function(a, b) {
                            return b.height - a.height;
                        });
                        this.taggingData2 = taggingData;
                    }
                },
                addTaggingRowData3: function() {
                    var isHas = false;
                    var taggingData = deepClone(this.taggingData3);
                    for (var i = 0; i < taggingData.length; i++) {
                        var item = taggingData[i];
                        if (item.height === this.tagging3) {
                            isHas = true;
                            break;
                        }
                    }
                    if (isHas) {
                        this.$Message.error(vRoot.$t('device.scaleAlreadyExists'));
                    } else {
                        taggingData.push({
                            height: this.tagging3,
                            volume: this.taggingOil3
                        });
                        taggingData.sort(function(a, b) {
                            return b.height - a.height;
                        });
                        this.taggingData3 = taggingData;
                    }
                },
                addTaggingRowData4: function() {
                    var isHas = false;
                    var taggingData = deepClone(this.taggingData4);
                    for (var i = 0; i < taggingData.length; i++) {
                        var item = taggingData[i];
                        if (item.height === this.tagging4) {
                            isHas = true;
                            break;
                        }
                    }
                    if (isHas) {
                        this.$Message.error(vRoot.$t('device.scaleAlreadyExists'));
                    } else {
                        taggingData.push({
                            height: this.tagging4,
                            volume: this.taggingOil4
                        });
                        taggingData.sort(function(a, b) {
                            return b.height - a.height;
                        });
                        this.taggingData4 = taggingData;
                    }
                },

                handlerClickQuery: function() {
                    var self = this;
                    this.currentIndex = 1;
                    self.getDeviceList(false, this.getQueryTypeNumber());
                },
                setCarIconType: function(type) {
                    this.carIconType = String(type);
                },
                getQueryTypeNumber: function() {
                    var result = 0;
                    switch (this.queryType) {
                        case 'all':
                            result = 0;
                            break;
                        case '7ot':
                            result = 7;
                            break;
                        case '60ot':
                            result = 60;
                            break;
                        case 'ot':
                            result = -1;
                            break;
                    }
                    return result;
                },
                expireNotifyTime: function(dayNumber) {

                    switch (dayNumber) {
                        case 0:
                            this.queryType = 'all';
                            break;
                        case 7:
                            this.queryType = '7ot';
                            break;
                        case 60:
                            this.queryType = '60ot';
                            break;
                        case -1:
                            this.queryType = 'ot';
                            break;
                    }
                    this.currentIndex = 1;
                    this.getDeviceList(false, dayNumber);
                },
                getDevType: function(row) {

                    var devType = "";
                    var item = vstore.state.deviceTypes[row.devicetype];
                    if (item) {
                        var label = item.typename;
                        if (item.remark) {
                            label += "(" + (isZh ? item.remark : item.remarken) + ")";
                        }

                        devType = label;
                    }


                    return devType;

                },
                handleChargeDevices: function() {
                    var me = this;
                    var url = myUrls.batchOperate();
                    var data = {
                        action: 'chargedevices',
                        chargeyears: Number(this.renewalYears),
                        deviceids: [editObject.deviceid]
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.success === 1) {
                            me.$Message.success('充值成功');
                            me.chargeModal = false;
                        } else {
                            me.$Message.success('充值失败 : ' + resp.cause);
                        }
                    });
                },
                filterDataInfo: function(devList) {
                    var me = this;
                    var data = [];
                    devList.forEach(function(dev) {
                        dev.devtype = me.getDevType(dev);
                        dev.deviceidkey = "\t" + dev.deviceid;
                        dev.devicenamekey = "\t" + dev.devicename;
                        dev.simnum ? (dev.simnumkey = "\t" + dev.simnum) : (dev.simnumkey = "");
                        dev.bindpwd = dev.bindpwd != null ? dev.bindpwd : '';
                        dev.createtimestr = "\t" + DateFormat.longToDateStr(dev.createtime, timeDifference);
                        dev.expirenotifytimestr = "\t" + DateFormat.longToDateStr(dev.expirenotifytime, timeDifference);
                        dev.groupname = me.getGroupName(dev.groupid);
                        dev.pinYin = __pinyin.getPinyin(dev.devicename);
                        dev.firstLetter = __pinyin.getFirstLetter(dev.devicename);
                        data.push(dev);
                    });
                    return data;
                },
                resetDevicePwd: function(index) {
                    var me = this;
                    var deviceid = this.tableData[index].deviceid;
                    var url = myUrls.resetDeviceLoginPwd();
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success((isZh ? "密码重置为:" : "Password reset to :") + resp.newpass);
                        } else {
                            me.$Message.error(isZh ? "密码重置失败" : "Password Reset Failed");
                        }
                    });
                },
                getGroupName: function(groupId) {
                    var groupName = isZh ? "默认组" : "Default";
                    if (this.allGroups[groupId] !== undefined) {
                        groupName = this.allGroups[groupId].groupname;
                    }
                    return groupName;
                },
                getDeviceList: function(isAll, expiredays) {
                    var me = this;
                    var url = myUrls.queryDevices();
                    // var url = myUrls.queryDeviceListWithGroupInfo();
                    me.loading = true;
                    utils.sendAjax(url, {
                        count: 10,
                        keyword: this.queryString,
                        offset: this.currentIndex - 1,
                        all: isAll,
                        expiredays: expiredays
                    }, function(resp) {
                        me.loading = false;
                        if (resp.status == 0 && resp.devices != null) {
                            if (isAll) {

                            } else {
                                me.tableData = me.filterDataInfo(resp.devices);
                                me.total = resp.totalcount;
                            }
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    }, function() {
                        me.loading = false;
                    });
                },
                handleDelete: function(deviceid) {
                    var me = this;
                    var url = myUrls.deleteDevice();
                    var data = {
                        deviceid: deviceid
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            rootuser = null;
                            isNeedRefresh = true;
                            if (deviceid == globalDeviceId) {
                                globalDeviceId = "";
                                vRoot.$store.commit('currentDeviceId', "");
                            }

                            me.$Message.success(me.$t("message.deleteSucc"));


                            me.tableData.forEach(function(itme, index) {
                                if (itme.deviceid == deviceid) {
                                    me.$delete(me.tableData, index);
                                }
                            });


                            me.recordsList.forEach(function(itme, index) {
                                if (itme.deviceid == deviceid) {
                                    me.$delete(me.recordsList, index);
                                }
                            });

                            // me.total = me.recordsList.length;
                            // me.tableData = me.recordsList.slice(me.currentIndex - 1, 10);
                        } else if (resp.status == 1) {
                            me.$Message.error(me.$t("message.deleteFailTips"));
                        } else {
                            me.$Message.error(me.$t("message.deleteFail"));
                        }
                        me.modal = false;

                    });
                },
                getCombinestatus: function() {
                    var combinestatus = 0;

                    if (this.combineStatus) {
                        combinestatus = combinestatus | 0x01;
                    }
                    if (this.combineStatusNotRun) {
                        combinestatus = combinestatus | 0x02;
                    }

                    return combinestatus;
                },
                queryOilInfo: function(deviceid) {
                    var url = myUrls.queryOilDetectors(),
                        me = this;


                    me.tankShape1 = String(0);
                    me.diameter1 = 0;
                    me.height1 = 0;
                    me.length1 = 0;
                    me.width1 = 0;
                    me.maxAdValue1 = 65535;
                    me.taggingData1 = [];
                    me.threshold1 = 10;
                    me.capacity1 = 0;

                    me.tankShape2 = String(0);
                    me.diameter2 = 0;
                    me.height2 = 0;
                    me.length2 = 0;
                    me.width2 = 0;
                    me.maxAdValue2 = 65535;
                    me.taggingData2 = [];
                    me.threshold2 = 10;
                    me.capacity2 = 0;

                    me.tankShape3 = String(0);
                    me.diameter3 = 0;
                    me.height3 = 0;
                    me.length3 = 0;
                    me.width3 = 0;
                    me.maxAdValue3 = 65535;
                    me.taggingData3 = [];
                    me.threshold3 = 10;
                    me.capacity3 = 0;

                    me.tankShape4 = String(0);
                    me.diameter4 = 0;
                    me.height4 = 0;
                    me.length4 = 0;
                    me.width4 = 0;
                    me.maxAdValue4 = 65535;
                    me.taggingData4 = [];
                    me.threshold4 = 10;
                    me.capacity4 = 0;


                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(resp) {
                        // me.combineStatus = resp.independent == 0 ? true : false;
                        // me.combineStatusNotRun = resp.independent == 0 ? true : false;
                        me.combineStatus = (resp.combinestatus & 0x01) == 0x01;
                        me.combineStatusNotRun = (resp.combinestatus & 0x02) == 0x02;
                        if (resp.oildetectors != null) {
                            me.$Message.success(vRoot.$t('monitor.querySucc'));
                            var oildetectors = resp.oildetectors;
                            oildetectors.forEach(function(item, index) {
                                var name = item.name;
                                if (!name) {
                                    name = isZh ? '油箱' : 'Box';
                                    name = name + (index + 1);
                                }
                                if (index == 0) {

                                    me.tankShape1 = String(item.appearance);
                                    me.diameter1 = item.diameter;
                                    me.height1 = item.height;
                                    me.length1 = item.length;
                                    me.width1 = item.width;
                                    me.maxAdValue1 = item.maxAdValue;
                                    me.taggingData1 = item.markers ? item.markers : [];
                                    me.threshold1 = item.threshold;
                                    me.capacity1 = item.capacity;
                                    me.name1 = name;
                                    me.useas1 = String(item.useas);
                                } else if (index == 1) {
                                    me.tankShape2 = String(item.appearance);
                                    me.diameter2 = item.diameter;
                                    me.height2 = item.height;
                                    me.length2 = item.length;
                                    me.width2 = item.width;
                                    me.maxAdValue2 = item.maxAdValue;
                                    me.taggingData2 = item.markers ? item.markers : [];
                                    me.threshold2 = item.threshold;
                                    me.capacity2 = item.capacity;
                                    me.name2 = name;
                                    me.useas2 = String(item.useas);
                                } else if (index == 2) {
                                    me.tankShape3 = String(item.appearance);
                                    me.diameter3 = item.diameter;
                                    me.height3 = item.height;
                                    me.length3 = item.length;
                                    me.width3 = item.width;
                                    me.maxAdValue3 = item.maxAdValue;
                                    me.taggingData3 = item.markers ? item.markers : [];
                                    me.threshold3 = item.threshold;
                                    me.capacity3 = item.capacity;
                                    me.name3 = name;
                                    me.useas3 = String(item.useas);
                                } else if (index == 3) {
                                    me.tankShape4 = String(item.appearance);
                                    me.diameter4 = item.diameter;
                                    me.height4 = item.height;
                                    me.length4 = item.length;
                                    me.width4 = item.width;
                                    me.maxAdValue4 = item.maxAdValue;
                                    me.taggingData4 = item.markers ? item.markers : [];
                                    me.threshold4 = item.threshold;
                                    me.capacity4 = item.capacity;
                                    me.name4 = name;
                                    me.useas4 = String(item.useas);
                                }
                            })
                        } else {
                            me.$Message.success(vRoot.$t('device.dataEmptyTips'));
                        }
                    });
                },
                saveWeightDetectors: function() {
                    if (this.weightData.length) {
                        var me = this;
                        var url = myUrls.saveWeightMarkers();
                        var data = {
                            deviceid: editObject.deviceid,
                            weightindex: this.sensorType,
                            markers: this.weightData,
                            protocoltype: Number(this.protocolType)
                        }
                        me.saveLoading = true;
                        utils.sendAjax(url, data, function(resp) {
                            me.saveLoading = false;
                            console.log(resp);
                            var status = resp.status;
                            if (status == CMD_SEND_RESULT_UNCONFIRM) {
                                me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_UNCONFIRM'));
                            } else if (status === CMD_SEND_RESULT_PASSWORD_ERROR) {
                                me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_PASSWORD_ERROR'));
                            } else if (status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE) {
                                me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_OFFLINE_NOT_CACHE'));
                            } else if (status === CMD_SEND_RESULT_OFFLINE_CACHED) {
                                me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_OFFLINE_CACHED'));
                            } else if (status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD) {
                                me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD'));
                            } else if (status === CMD_SEND_RESULT_DETAIL_ERROR) {
                                me.$Message.error(me.$t('monitor.CMD_SEND_RESULT_DETAIL_ERROR') + resp.cause);
                            } else if (status === CMD_SEND_CONFIRMED) {
                                me.$Message.success(me.$t('message.saveSucc') + ',' + resp.cause);
                            } else if (status === CMD_SEND_OVER_RETRY_TIMES) {
                                me.$Message.error(me.$t('monitor.CMD_SEND_OVER_RETRY_TIMES'));
                            } else if (status === CMD_SEND_SYNC_TIMEOUT) {
                                me.$Message.error(me.$t('monitor.CMD_SEND_SYNC_TIMEOUT') + resp.cause);
                            }
                        }, function(e) {
                            me.saveLoading = false;
                        });
                    } else {
                        this.$Message.error(isZh ? '请填写AD值' : '请填写AD值');
                    }
                },
                saveOilDetectors: function() {
                    var oilDetector1 = {
                        appearance: Number(this.tankShape1),
                        maxAdValue: this.maxAdValue1,
                        length: this.length1,
                        width: this.width1,
                        height: this.height1,
                        diameter: this.diameter1,
                        markers: this.taggingData1,
                        threshold: this.threshold1,
                        name: this.name1,
                        useas: Number(this.useas1),
                    };
                    var oilDetector2 = {
                        appearance: Number(this.tankShape2),
                        maxAdValue: this.maxAdValue2,
                        length: this.length2,
                        width: this.width2,
                        height: this.height2,
                        diameter: this.diameter2,
                        markers: this.taggingData2,
                        threshold: this.threshold2,
                        name: this.name2,
                        useas: Number(this.useas2),
                    };
                    var oilDetector3 = {
                        appearance: Number(this.tankShape3),
                        maxAdValue: this.maxAdValue3,
                        length: this.length3,
                        width: this.width3,
                        height: this.height3,
                        diameter: this.diameter3,
                        markers: this.taggingData3,
                        threshold: this.threshold3,
                        name: this.name3,
                        useas: Number(this.useas3),
                    };
                    var oilDetector4 = {
                        appearance: Number(this.tankShape4),
                        maxAdValue: this.maxAdValue4,
                        length: this.length4,
                        width: this.width4,
                        height: this.height4,
                        diameter: this.diameter4,
                        markers: this.taggingData4,
                        threshold: this.threshold4,
                        name: this.name4,
                        useas: Number(this.useas4),
                    };
                    var oildetectors = [oilDetector1, oilDetector2, oilDetector3, oilDetector4];
                    var url = myUrls.saveOilDetectors(),
                        me = this;
                    var data = {
                        deviceid: editObject.deviceid,
                        oildetectors: oildetectors,
                        combinestatus: me.getCombinestatus(),
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            if (resp.oildetectors) {
                                resp.oildetectors.forEach(function(item, index) {
                                    me['capacity' + (index + 1)] = item.capacity;
                                })
                            }
                            me.$Message.success(vRoot.$t('message.saveSucc'));
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                exportData: function() {
                    this.exportDevice(this.tableData);
                },
                exportDevice: function(tableData) {
                    let data = [
                        [
                            vRoot.$t("reportForm.index"),
                            vRoot.$t("alarm.devName"),
                            vRoot.$t("alarm.devNum"),
                            vRoot.$t("user.devType"),
                            'ICCID',
                            vRoot.$t("monitor.phoneNumber"),
                            vRoot.$t("bgMgr.bindpwd"),
                            vRoot.$t("bgMgr.addTime"),
                            vRoot.$t("monitor.expireTime"),
                            vRoot.$t("bgMgr.creater"),
                            vRoot.$t("user.grouping"),
                            vRoot.$t("monitor.remarks"),
                        ]
                    ]

                    tableData.forEach((item, index) => {
                        let itemArr = [];
                        itemArr.push(++index);
                        itemArr.push(item.devicename);
                        itemArr.push(item.deviceid);
                        itemArr.push(item.devtype);
                        itemArr.push(item.simiccid ? item.simiccid : '');
                        itemArr.push(item.simnumkey);
                        itemArr.push(item.bindpwd);
                        itemArr.push(item.createtimestr);
                        itemArr.push(item.expirenotifytimestr);
                        itemArr.push(item.creater);
                        itemArr.push(item.groupname);
                        itemArr.push(item.remark ? item.remark : '');
                        data.push(itemArr);
                    })

                    var options = {
                        title: isZh ? '设备' : 'deviceids',
                        data: data,
                    };
                    new XlsxCls(options).exportExcel();
                },
                exportAllDevice: function() {
                    var url = myUrls.queryDevices(),
                        me = this;
                    this.exportLoading = true;
                    utils.sendAjax(url, {
                        all: true,
                        keyword: this.queryString,
                    }, function(resp) {
                        me.exportLoading = false;
                        if (resp.status == 0 && resp.devices != null) {
                            me.$Message.success(vRoot.$t('message.exportSucceeded'));
                            me.exportDevice(me.filterDataInfo(resp.devices));
                        } else {
                            me.$Message.error(vRoot.$t('message.exportFailed'));
                        }
                    }, function() {
                        me.exportLoading = false;
                        me.$Message.error(vRoot.$t('message.networkError'));
                    });
                },
                cleanValue: function() {
                    this.queryString = '';
                },
                handleSubmit: function() {
                    var me = this;
                    var url = myUrls.editDeviceAllInfo();
                    if (this.expirenotifytime == "") {
                        me.$Message.error(me.$t("message.plSelectTime"));
                        return;
                    }
                    var driverInfo = deepClone(this.driverInfo);
                    driverInfo.driversex = Number(driverInfo.driversex);
                    driverInfo.drivercertificatetype = Number(driverInfo.drivercertificatetype);
                    driverInfo.driverbrith = DateFormat.format(driverInfo.driverbrith, 'yyyy-MM-dd');
                    driverInfo.driverinitialdate = DateFormat.format(driverInfo.driverinitialdate, 'yyyy-MM-dd');
                    driverInfo.drivereffectivedate = DateFormat.format(driverInfo.drivereffectivedate, 'yyyy-MM-dd');
                    driverInfo.driverrelatevehiclenum = DateFormat.format(driverInfo.driverrelatevehiclenum, 'yyyy-MM-dd');

                    var insureInfoData = deepClone(this.insureInfoData);
                    if (insureInfoData.subinsuretime && insureInfoData.subinsuretime.length > 0) {
                        insureInfoData.subinsuretime = DateFormat.format(insureInfoData.subinsuretime, 'yyyy-MM-dd');
                    }
                    if (insureInfoData.effecttime && insureInfoData.effecttime.length > 0) {
                        insureInfoData.effecttime = DateFormat.format(insureInfoData.effecttime, 'yyyy-MM-dd');
                    }
                    var extendinfo = Object.assign(deepClone(this.ownerInfoData), driverInfo, insureInfoData)
                    var data = {
                        baseinfo: {
                            deviceid: editObject.deviceid,
                            newdeviceid: this.deviceid,
                            devicetype: this.devicetype,
                            expirenotifytime: new Date(this.expirenotifytime).getTime(),
                            loginenable: Number(this.loginenable),
                            deviceenable: Number(this.deviceenable),
                            allowedit: Number(this.allowedit),
                            timezone: Number(this.timezone),
                            calmileageway: Number(this.calmileageway),
                        },
                        extendinfo: extendinfo
                    };

                    if (this.devicename) {
                        data.baseinfo.devicename = this.devicename;
                    };
                    if (this.remark) {
                        data.baseinfo.remark = this.remark;
                    };
                    if (this.teltype) {
                        data.baseinfo.teltype = Number(this.teltype);
                    };
                    if (this.plateno) {
                        data.baseinfo.plateno = this.plateno;
                    };
                    if (this.cartagcolor) {
                        data.baseinfo.cartagcolor = Number(this.cartagcolor);
                    };
                    if (this.carcolor) {
                        data.baseinfo.carcolor = Number(this.carcolor);
                    };
                    if (this.vin) {
                        data.baseinfo.vin = this.vin;
                    };
                    if (this.icon) {
                        data.baseinfo.icon = Number(this.icon);
                    };

                    if (this.simnum !== "") {
                        data.baseinfo.simnum = this.simnum;
                    };
                    if (this.groupid !== "" && this.groupsList.length) {
                        data.baseinfo.groupid = this.groupid;
                    } else {
                        data.baseinfo.groupid = 0;
                    };


                    data.baseinfo.monitor = this.monitor;

                    this.forwardurl && (data.baseinfo.forwardurl = this.forwardurl);

                    if (globalUserList.indexOf(this.createrToUser) == -1) {
                        me.$Message.error(me.$t("message.selectCorrectAccount"));
                        return;
                    }

                    if (this.userType < 4) {
                        data.baseinfo.creater = this.createrToUser;
                    } else {
                        data.baseinfo.creater = userName;
                    }

                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            var baseinfo = data.baseinfo;
                            editObject.teltype = String(baseinfo.teltype);
                            var newData = Object.assign(editObject, baseinfo);
                            newData.expirenotifytimestr = DateFormat.longToLocalDateTimeStr(baseinfo.expirenotifytime);
                            newData.deviceid = baseinfo.newdeviceid;
                            newData.deviceidkey = baseinfo.newdeviceid;
                            me.tableData[me.editDeviceIndex] = newData;
                            utils.changeSingleItemData(me.recordsList, newData, 'deviceid');
                            isNeedRefresh = true;
                            me.$Message.success(me.$t("message.changeSucc"));
                        } else if (resp.status = 1) {
                            me.$Message.error(me.$t("message.deviceIDrepeat"));
                        } else if (resp.status = -1) {
                            if (resp.cause !== null && resp.cause.indexOf("token") != -1) {
                                window.location.href = "index.html";
                            } else {
                                me.$Message.error(me.$t("message.changeFail"));
                            }
                        }
                    });
                },
                resetInfo: function() {
                    this.devicename = "";
                    this.simnum = "";
                    this.expirenotifytime = "";
                    this.loginenable = "0";
                    this.deviceenable = "0";
                    this.groupsList = [];
                    this.groupid = "";

                    this.forwardurl = "";
                    this.monitor = "";
                },
                setDeviceData: function() {
                    var me = this;
                    me.deviceid = editObject.deviceid;
                    me.simnum = editObject.simnum;
                    me.expirenotifytime = editObject.expirenotifytimestr;
                    me.devicename = editObject.devicename;
                    me.devicetype = editObject.devicetype;
                    me.loginenable = editObject.loginenable + "";
                    me.deviceenable = "" + editObject.deviceenable;
                    me.forwardurl = editObject.forwardurl;
                    me.isfree = editObject.isfree;
                    me.remark = editObject.remark;
                    me.monitor = editObject.monitor;
                    me.timezone = String(editObject.timezone);
                    me.calmileageway = String(editObject.calmileageway);
                    me.teltype = String(editObject.teltype);
                    me.allowedit = String(editObject.allowedit);
                    me.plateno = editObject.plateno;
                    me.cartagcolor = String(editObject.cartagcolor);
                    me.carcolor = String(editObject.carcolor);
                    me.vin = editObject.vin;
                    me.icon = editObject.icon;
                },
                getDeviceType: function() {
                    var me = this;
                    var deviceTypes = vstore.state.deviceTypes;
                    for (var key in deviceTypes) {
                        var item = deviceTypes[key];
                        if (item) {
                            var label = item.typename;
                            if (item.remark) {
                                label += "(" + (isZh ? item.remark : item.remarken) + ")";
                            }
                            me.deviceTypeList.push({
                                value: item.devicetypeid,
                                label: label
                            });
                        }
                    }
                },
                queryGroupsByUserName: function(userName) {
                    me = this;
                    groupsList = [{
                        label: isZh ? '默认组' : 'Default',
                        value: 0
                    }];
                    var groupid = editObject.groupid;
                    var foundGroupId = false;
                    for (var key in me.allGroups) {
                        var item = me.allGroups[key];
                        if (item.creater == userName) {
                            groupsList.push({
                                label: item.groupname,
                                value: item.groupid
                            });
                            if (item.groupid == groupid) {
                                foundGroupId = true;
                            }
                        }
                    }
                    me.groupsList = groupsList;
                    me.groupid = editObject.groupid;
                    if (foundGroupId) {
                        vueInstanse.groupid = editObject.groupid;
                    } else {
                        vueInstanse.groupid = 0;
                    }
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 184;
                },
                queryGroupInfos: function(callback) {
                    var me = this;
                    utils.sendAjax(myUrls.queryGroupInfos(), {}, function(resp) {
                        if (resp.status === 0) {
                            resp.groups.forEach(function(item) {
                                me.allGroups[item.groupid] = item;
                            });
                        }
                        callback();
                    })
                },
                readWorkbookFromLocalFile: function(file, callback) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var data = e.target.result;
                        var workbook = XLSX.read(data, {
                            type: 'binary'
                        });
                        if (callback) callback(workbook);
                    };
                    reader.readAsBinaryString(file);
                },
                parserExcelData1: function(excelData) {
                    try {
                        var indexY = 2;
                        var tableData = [];
                        while (true) {
                            var vinnoKey = this.excelX[0] + indexY; //设备ID
                            var policynoKey = this.excelX[1] + indexY; //防盗号

                            if (excelData[vinnoKey] == undefined) {
                                break;
                            }
                            tableData.push({
                                height: excelData[vinnoKey] ? excelData[vinnoKey].v : '',
                                volume: excelData[policynoKey] ? excelData[policynoKey].v : '',
                            })

                            indexY++;
                        }
                        this.taggingData1 = tableData;
                    } catch (error) {
                        console.log('error', error);
                        this.$Message.error(vRoot.$t('message.useTemplateTips'));
                    }
                },
                parserExcelData2: function(excelData) {
                    try {
                        var indexY = 2;
                        var tableData = [];
                        while (true) {
                            var vinnoKey = this.excelX[0] + indexY; //设备ID
                            var policynoKey = this.excelX[1] + indexY; //防盗号

                            if (excelData[vinnoKey] == undefined) {
                                break;
                            }

                            tableData.push({
                                height: excelData[vinnoKey] ? excelData[vinnoKey].v : '',
                                volume: excelData[policynoKey] ? excelData[policynoKey].v : '',
                            })

                            indexY++;
                        }
                        this.taggingData2 = tableData;
                    } catch (error) {
                        this.$Message.error(vRoot.$t('message.useTemplateTips'));
                    }
                },
                parserExcelData3: function(excelData) {
                    try {
                        var indexY = 2;
                        var tableData = [];
                        while (true) {
                            var vinnoKey = this.excelX[0] + indexY; //设备ID
                            var policynoKey = this.excelX[1] + indexY; //防盗号

                            if (excelData[vinnoKey] == undefined) {
                                break;
                            }

                            tableData.push({
                                height: excelData[vinnoKey] ? excelData[vinnoKey].v : '',
                                volume: excelData[policynoKey] ? excelData[policynoKey].v : '',
                            })

                            indexY++;
                        }
                        this.taggingData3 = tableData;
                    } catch (error) {
                        this.$Message.error(vRoot.$t('message.useTemplateTips'));
                    }
                },
                parserExcelData4: function(excelData) {
                    try {
                        var indexY = 2;
                        var tableData = [];
                        while (true) {
                            var vinnoKey = this.excelX[0] + indexY; //设备ID
                            var policynoKey = this.excelX[1] + indexY; //防盗号

                            if (excelData[vinnoKey] == undefined) {
                                break;
                            }

                            tableData.push({
                                height: excelData[vinnoKey] ? excelData[vinnoKey].v : '',
                                volume: excelData[policynoKey] ? excelData[policynoKey].v : '',
                            })
                            indexY++;
                        }
                        this.taggingData4 = tableData;
                    } catch (error) {
                        this.$Message.error(vRoot.$t('message.useTemplateTips'));
                    }
                },
                parserExcelData5: function(excelData) {
                    try {
                        var indexY = 2;
                        var tableData = [];
                        while (true) {
                            var vinnoKey = this.excelX[0] + indexY; //设备ID
                            var policynoKey = this.excelX[1] + indexY; //防盗号

                            if (excelData[vinnoKey] == undefined) {
                                break;
                            }

                            tableData.push({
                                advalue: excelData[vinnoKey] ? excelData[vinnoKey].v : '',
                                weight: excelData[policynoKey] ? excelData[policynoKey].v : '',
                            })

                            indexY++;
                        }
                        this.weightData = tableData;
                    } catch (error) {
                        this.$Message.error(vRoot.$t('message.useTemplateTips'));
                    }
                },
                importWeightData: function() {
                    this.fileEl5.files.length = 0;
                    this.fileEl5.value = "";
                    this.fileEl5.click();
                },
                importTownerInfo1: function() {
                    this.fileEl1.files.length = 0;
                    this.fileEl1.value = "";
                    this.fileEl1.click();
                },
                importTownerInfo2: function() {
                    this.fileEl2.files.length = 0;
                    this.fileEl2.value = "";
                    this.fileEl2.click();
                },
                importTownerInfo3: function() {
                    this.fileEl3.files.length = 0;
                    this.fileEl3.value = "";
                    this.fileEl3.click();
                },
                importTownerInfo4: function() {
                    this.fileEl4.files.length = 0;
                    this.fileEl4.value = "";
                    this.fileEl4.click();
                },
                exportDevice1: function() {
                    var taggingColumns1 = deepClone(this.taggingColumns1);
                    taggingColumns1.pop();
                    taggingColumns1.shift();
                    this.$refs.taggingTab1.exportCsv({
                        filename: vRoot.$t('device.calibration'),
                        columns: taggingColumns1,
                        data: this.taggingData1,
                        quoted: true,
                    });
                },
                exportDevice2: function() {
                    var taggingColumns2 = deepClone(this.taggingColumns2);
                    taggingColumns2.pop();
                    taggingColumns2.shift();
                    this.$refs.taggingTab2.exportCsv({
                        filename: vRoot.$t('device.calibration'),
                        columns: taggingColumns2,
                        data: this.taggingData2,
                        quoted: true,
                    });
                },
                exportDevice3: function() {
                    var taggingColumns3 = deepClone(this.taggingColumns3);
                    taggingColumns3.pop();
                    taggingColumns3.shift();
                    this.$refs.taggingTab3.exportCsv({
                        filename: vRoot.$t('device.calibration'),
                        columns: taggingColumns3,
                        data: this.taggingData3,
                        quoted: true,
                    });
                },
                exportDevice4: function() {
                    var taggingColumns4 = deepClone(this.taggingColumns4);
                    taggingColumns4.pop();
                    taggingColumns4.shift();
                    this.$refs.taggingTab4.exportCsv({
                        filename: vRoot.$t('device.calibration'),
                        columns: taggingColumns4,
                        data: this.taggingData4,
                        quoted: true,
                    });
                },
                exportWeightData: function() {
                    var weightColumns = deepClone(this.weightColumns);
                    weightColumns.pop();
                    weightColumns.shift();
                    this.$refs.weightTable.exportCsv({
                        filename: vRoot.$t('device.weightMarking') + '-' + editObject.deviceid + '-' + this.sensorType,
                        columns: weightColumns,
                        data: this.weightData,
                        quoted: true,
                    });
                },
            },
            watch: {
                oilModal: function(newVal) {
                    if (newVal && this.tankShape1 == 4) {
                        var me = this;
                        me.taggingColumns1 = [];
                        setTimeout(function() {
                            me.taggingColumns1 = [{
                                type: 'index',
                                width: 65
                            }, {
                                key: 'height',
                                title: vRoot.$t('device.scale'),
                            }, {
                                key: 'volume',
                                title: vRoot.$t('reportForm.oil'),
                            }, {
                                title: vRoot.$t('alarm.action'),
                                width: 100,
                                render: function(h, params) {
                                    var index = params.index;
                                    return h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: function() {
                                                vueInstanse.taggingData1.splice(index, 1);
                                            }
                                        }
                                    }, vRoot.$t('monitor.delete'))
                                },
                            }]
                        }, 100)
                    }
                },
                createrToUser: function(newVal) {
                    if (globalUserList.indexOf(newVal) != -1) {
                        this.queryGroupsByUserName(newVal);
                    } else {
                        this.groupsList = [];
                        this.groupid = 0;
                    }
                }
            },
            computed: {
                isShowMaxAdValue1: function() {
                    return this.tankShape1 != '0' && this.tankShape1 != '4';
                },
                isShowMaxAdValue2: function() {
                    return this.tankShape2 != '0' && this.tankShape2 != '4';
                },
                isShowMaxAdValue3: function() {
                    return this.tankShape3 != '0' && this.tankShape3 != '4';
                },
                isShowMaxAdValue4: function() {
                    return this.tankShape4 != '0' && this.tankShape4 != '4';
                },
                disabledOverdueTime: function() {
                    return this.userType > 4;
                },
                isAlloweditDisabled: function() {
                    return !(Number(this.userType) <= 1);
                },
                carIconSrc: function() {
                    return "./images/carstate/" + this.carIconType + "_green_0.png"
                }
            },
            mixins: [mixIn, queryDeviceInputMiMin],
            mounted: function() {

                var me = this;
                var userlists = [];
                globalUserList.forEach(function(item) {
                    userlists.push({
                        label: item,
                        value: item,
                    })
                });
                this.userlists = userlists;
                this.userType = vstore.state.userType;
                this.allGroups = {};
                if (this.userType > 1) {
                    this.columns.splice(9, 1);
                }
                this.queryGroupInfos(function() {
                    me.getDeviceList(false, 0);
                });
                this.getDeviceType();
                this.calcTableHeight();
                this.fileEl1 = document.getElementById('file1');
                this.fileEl1.onchange = function(e) {
                    var idx = e.srcElement.value.lastIndexOf('.');
                    var houzhui = e.srcElement.value.slice(idx);
                    var file = e.target.files[0]
                    me.readWorkbookFromLocalFile(file, function(workbook) {
                        me.parserExcelData1(workbook.Sheets[isZh ? '测量标定' : 'admarker']);
                    });
                };
                this.excelX = ['A', 'B', 'C'];

                this.fileEl2 = document.getElementById('file2');
                this.fileEl2.onchange = function(e) {
                    var idx = e.srcElement.value.lastIndexOf('.');
                    var houzhui = e.srcElement.value.slice(idx);

                    var file = e.target.files[0]
                    me.readWorkbookFromLocalFile(file, function(workbook) {
                        me.parserExcelData2(workbook.Sheets[isZh ? '测量标定' : 'admarker']);
                    });
                };

                this.fileEl3 = document.getElementById('file3');
                this.fileEl3.onchange = function(e) {
                    var idx = e.srcElement.value.lastIndexOf('.');
                    var houzhui = e.srcElement.value.slice(idx);
                    var file = e.target.files[0]
                    me.readWorkbookFromLocalFile(file, function(workbook) {
                        me.parserExcelData3(workbook.Sheets[isZh ? '测量标定' : 'admarker']);
                    });
                };

                this.fileEl4 = document.getElementById('file4');
                this.fileEl4.onchange = function(e) {
                    var idx = e.srcElement.value.lastIndexOf('.');
                    var houzhui = e.srcElement.value.slice(idx);
                    var file = e.target.files[0]
                    me.readWorkbookFromLocalFile(file, function(workbook) {
                        me.parserExcelData4(workbook.Sheets[isZh ? '测量标定' : 'admarker']);
                    });
                };

                this.fileEl5 = document.getElementById('file5');
                this.fileEl5.onchange = function(e) {
                    var idx = e.srcElement.value.lastIndexOf('.');
                    var houzhui = e.srcElement.value.slice(idx);

                    var file = e.target.files[0]
                    me.readWorkbookFromLocalFile(file, function(workbook) {
                        me.parserExcelData5(workbook.Sheets[isZh ? '载重标定' : 'weightmarker']);
                    });
                };

                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>